Module 在 webpack 中的配置

webpack 是一个强大的模块打包工具，可让您轻松地将各种资源（如 JavaScript、CSS 和 HTML）组合成单个文件。在 webpack 中，模块是代码或资源的逻辑块，可以通过 loader 进行处理和转换。

loader

loader 是 webpack 用于预处理模块的工具。它们可以用于各种任务，例如转换 JavaScript、编译 CSS 或压缩图像。webpack 内置了大量 loader，您还可以在 npm 上找到更多 loader。

要使用 loader，您需要在 webpack 配置文件中指定它们。有三种方法可以做到这一点：

• 配置（推荐）： 在 webpack.config.js 文件中指定 loader。

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
    },
    {
      test: /\.css$/,
      loader: 'css-loader',
    },
  ],
};

• 内联： 在每个 import 语句中显式指定 loader。

import(/* webpackChunkName: "bundle" */ 'babel-loader!./file.js');
import(/* webpackChunkName: "bundle" */ 'css-loader!./file.css');

• CLI： 在 shell 命令中指定它们。

webpack --module-bind 'js=babel-loader' --module-bind 'css=css-loader'

配置选项

除了 loader 之外，您还可以使用配置选项来控制 webpack 的行为。这些选项包括：

• entry： 指定要构建的入口文件。
• output： 指定要输出的文件名和路径。
• mode： 指定要使用的 webpack 模式（例如，开发模式或生产模式）。
• plugins： 允许您在构建过程中执行自定义任务。
• optimization： 允许您配置 webpack 的优化设置。

plugins

plugins 是 webpack 用于扩展其功能的工具。它们可以用于各种任务，例如自动生成 HTML 文件、提取公共代码或压缩输出。webpack 内置了大量 plugins，您还可以在 npm 上找到更多 plugins。

要使用 plugins，您需要在 webpack 配置文件中指定它们。有两种方法可以做到这一点：

• 配置（推荐）： 在 webpack.config.js 文件中指定 plugins。

plugins: [
  new HtmlWebpackPlugin({
    title: 'My App',
  }),
  new ExtractTextPlugin('styles.css'),
  new UglifyJsPlugin(),
],

• CLI： 在 shell 命令中指定它们。

webpack --plugins HtmlWebpackPlugin,ExtractTextPlugin,UglifyJsPlugin

optimization

optimization 是 webpack 用于优化构建输出的工具。它允许您配置各种优化设置，例如：

• minimizer： 指定要使用的优化器。
• splitChunks： 允许您将公共代码提取到单独的文件中。
• runtimeChunk： 允许您将运行时代码提取到单独的文件中。

要使用 optimization，您需要在 webpack 配置文件中指定它。

optimization: {
  minimizer: [
    new TerserPlugin(),
  ],
  splitChunks: {
    chunks: 'all',
  },
  runtimeChunk: true,
},

总结

webpack 中的 Module 配置非常强大，可让您构建出满足您需求的应用程序。通过使用 loader、配置选项、plugins 和 optimization，您可以控制 webpack 的行为并优化构建输出。