Webpack 入门教程

运行 npx webpack，Webpack 会处理 index.js，并在 dist 文件夹下生成 bundle.js。在浏览器中打开 dist/index.html，你应该能看到“Hello Webpack!”。

模式（Mode）

Webpack 提供了两种内置的模式：development 和 production。通过设置 mode 参数，可以启用对应模式下的 Webpack 内置优化。

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

开发模式下，Webpack 会注重快速重新构建和源码调试。生产模式下，会自动开启代码压缩、作用域提升等优化。

使用 Loader

现在让我们尝试使用 ES6 语法和样式文件。首先安装必要的 loader：

npm install --save-dev babel-loader @babel/core @babel/preset-env style-loader css-loader

配置 Babel 处理 JS

创建 .babelrc 或直接在 webpack.config.js 中配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

现在你可以在项目中放心使用 ES6+ 语法了。

配置 CSS 处理

module: {
  rules: [
    // ...babel rule
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'], // 链式调用，从右向左执行
    },
  ],
},

在 src 下新建 style.css：

body {
  background-color: #f0f0f0;
  color: #333;
}

在 index.js 中引入：

import './style.css';

重新打包，CSS 会动态注入到页面中（style-loader 的作用）。

使用插件

插件是 Webpack 的支柱，用来实现更丰富的功能。

HtmlWebpackPlugin

这个插件可以自动生成 HTML 文件，并注入打包后的资源。安装：

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

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 可选，提供自定义模板
    }),
  ],
};

移除 dist/index.html，让插件自动处理。你可以创建一个 src/index.html 作为模板。

其他常用插件

• MiniCssExtractPlugin：将 CSS 提取为单独的文件（生产环境常用）。
• CleanWebpackPlugin：在每次构建前清理输出目录。
• CopyWebpackPlugin：复制静态资源到输出目录。

开发服务器

每次修改代码后手动运行 npx webpack 非常低效。我们可以使用 webpack-dev-server，它提供了实时重载和热模块替换功能。

安装：

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

修改 webpack.config.js：

module.exports = {
  // ...
  devServer: {
    static: './dist', // 在 webpack-dev-server v4 中此选项替换了 contentBase
    hot: true,        // 开启热模块替换
    open: true,       // 自动打开浏览器
  },
};

在 package.json 中添加脚本：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

运行 npm start，浏览器将自动打开，修改代码后会即时刷新。

处理图片和字体等资源

Webpack 5 内置了资源模块（Asset Modules），无需额外安装 loader。你可以在 module.rules 中这样配置：

{
  test: /\.(png|jpg|gif|svg)$/i,
  type: 'asset/resource', // 将文件复制到输出目录
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
},

在 JS 或 CSS 中直接导入图片/字体路径即可使用。

代码分离（Code Splitting）

Webpack 提供了三种常用方法来实现代码分离：

• 入口起点：手动配置多个入口，但不够灵活。
• 防止重复：使用 SplitChunksPlugin 将公共依赖分离。
• 动态导入：使用 import() 语法，按需加载模块。

动态导入示例：

function getComponent() {
  return import('lodash')
    .then(({ default: _ }) => {
      const element = document.createElement('div');
      element.innerHTML = _.join(['Hello', 'webpack'], ' ');
      return element;
    });
}

getComponent().then((component) => {
  document.body.appendChild(component);
});