Webpack 使用详解

标签：-- webpack module loader Webpack 详解使用 js

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。本文将详细介绍如何使用 Webpack，以及提供代码示例。为了保持篇幅，我们将简要介绍 Webpack 的核心概念和功能。

一、核心概念

入口（entry）：应用程序的起点。

输出（output）：打包后资源的输出位置。

加载器（loader）：将非 JavaScript 文件转换为模块。

插件（plugin）：执行范围更广的任务，如优化、压缩等。

二、安装与配置

1. 安装

首先，确保你的系统已经安装了 Node.js。使用以下命令安装 Webpack 和 Webpack CLI：

npm install --save-dev webpack webpack-cli

2. 配置

在项目根目录下，创建一个名为 webpack.config.js 的配置文件。以下是一个简单的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出目录
  }
};

三、加载器与插件

1. 加载器

加载器用于将非 JavaScript 文件转换为模块。以下是一些常用加载器的示例：

(1) 样式加载器 安装 style-loader 和 css-loader：

npm install --save-dev style-loader css-loader

配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

(2) 文件加载器 安装 file-loader：

npm install --save-dev file-loader

配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

2. 插件

插件可以执行更广泛的任务，如优化、压缩等。以下是一些常用插件的示例：

(1) HtmlWebpackPlugin 安装 html-webpack-plugin：

npm install --save-dev html-webpack-plugin

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ]
};

(2) CleanWebpackPlugin 安装 clean-webpack-plugin：

npm install --save-dev clean-webpack-plugin

配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin()
  ]
};

四、开发与生产环境

1. 模式

Webpack 支持两种模式：开发（development）和生产（production）。开发模式不会执行代码压缩和优化，而生产模式会对代码进行压缩和优化。在 webpack.config.js 文件中设置模式：

module.exports = {
  // ...
  mode: 'development' // 或 'production'
};

2. 开发服务器

安装 webpack-dev-server：

npm install --save-dev webpack-dev-server

配置：

module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

五、示例项目

以下是一个简单的 Webpack 示例项目：

my-app/
|-- src/
|   |-- index.html
|   |-- index.js
|   |-- styles.css
|   |-- image.png
|-- package.json
|-- webpack.config.js

index.html

<!DOCTYPE html>
 <html> 
 	<head> 
		 <meta charset="utf-8" />
 		 <title>My App</title>
   </head>
   <body> 
    	<div id="app"></div> 
   		<script src="bundle.js"></script> 
   </body> 
</html>

index.js

import './styles.css';
import imgSrc from './image.png';

const app = document.getElementById('app');
app.innerHTML = `
  Hello, Webpack!
  <img src="${imgSrc}" alt="Webpack Logo" />
`;

styles.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #2c3e50;
}

img {
  width: 150px;
  height: 150px;
}

在 webpack.config.js 中配置加载器和插件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new CleanWebpackPlugin(),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

在 package.json 中添加启动脚本：

{
  // ...
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
  // ...
}

运行项目：

npm start

访问 http://localhost:9000 即可查看示例项目。使用 npm run build 可以打包项目。

总结

通过本文，你应该已经掌握了 Webpack 的基本使用方法。实际项目中，你可能还需要根据需求进一步配置 Webpack。更多信息和高级配置，请查阅 Webpack 官方文档。

标签：--,webpack,module,loader,Webpack,详解,使用,js
From： https://blog.51cto.com/u_16171861/7073538