【深度解析】Webpack高级配置，让你的构建更上一层楼🚀

在 webpack 配置中，除了基本的入口、出口和模块规则之外，还有一些高级配置选项可以帮助你更精细地控制构建过程。以下是一些常见的配置项及其用途：

1. context

context: path.resolve(__dirname, "app")

• 作用：设置 webpack 的上下文目录。入口和 loaders 的相对路径会以 context 的配置作为基准路径，这样，你的配置会独立于 CWD（当前工作目录）。

• 示例：如果你的项目结构如下：

  my-project/
  ├── app/
  │   ├── src/
  │   │   └── index.js
  ├── dist/
  └── webpack.config.js
  

  你可以设置 context 为 app，这样入口文件可以写成 ./src/index.js，而不是 ./app/src/index.js。

2. output

library

library: "abc"

• 作用：将打包后的结果暴露给一个全局变量 abc。
• 示例：如果 library: "MyLib"，那么打包后的代码会在全局作用域下创建一个名为 MyLib 的变量。

libraryTarget

libraryTarget: "var"

• 作用：控制如何暴露入口包的导出结果。
• 可用值：
  • var：默认值，暴露给一个普通变量。
  • window：暴露给 window 对象的一个属性。
  • this：暴露给 this 的一个属性。
  • global：暴露给 global 的一个属性。
  • commonjs：暴露给 exports 的一个属性。
  • 更多：官方文档

3. target

target: "web" // 默认值

• 作用：设置打包结果最终要运行的环境。
• 常用值：
  • web：打包后的代码运行在 Web 环境中。
  • node：打包后的代码运行在 Node.js 环境中。
  • 更多：官方文档

4. module.noParse

noParse: /jquery/

• 作用：不解析正则表达式匹配的模块，通常用于忽略那些大型的单模块库，以提高构建性能。
• 示例：如果你的项目中使用了 jQuery，可以设置 noParse: /jquery/，这样 webpack 不会解析 jQuery 的源代码，从而加快构建速度。

5. resolve

resolve 相关配置主要用于控制模块解析过程。

modules

modules: ["node_modules"] // 默认值

• 作用：当解析模块时，如果遇到导入语句 require("test")，webpack 会从指定的目录中寻找依赖的模块。
• 示例：默认情况下，webpack 会从当前目录下的 node_modules 目录和上级目录的 node_modules 目录中查找模块。

extensions

extensions: [".js", ".json"] // 默认值

• 作用：当解析模块时，遇到无具体后缀的导入语句，例如 require("test")，会依次测试它的后缀名。
• 示例：如果 extensions: [".js", ".json"]，那么 require("test") 会依次尝试 test.js 和 test.json。

alias

alias: {
  "@": path.resolve(__dirname, 'src'),
  "_": __dirname
}

• 作用：设置模块的别名，使导入语句更加简洁。

• 示例：如果你的项目结构如下：

  my-project/
  ├── src/
  │   └── components/
  │       └── App.js
  └── webpack.config.js
  

  你可以设置 alias: { "@": path.resolve(__dirname, 'src') }，这样 import App from '@/components/App' 会解析为 import App from './src/components/App'。

6. externals

externals: {
  jquery: "$",
  lodash: "_"
}

• 作用：从最终的 bundle 中排除掉配置的模块，适用于一些第三方库来自外部 CDN 的情况。

• 示例：如果你的入口模块是：

  // index.js
  require("jquery");
  require("lodash");
  

  生成的 bundle 会包含 jQuery 和 lodash 的源代码。但有了 externals 配置后，生成的 bundle 会变成：

  (function(){
      ...
  })({
      "./src/index.js": function(module, exports, __webpack_require__){
          __webpack_require__("jquery");
          __webpack_require__("lodash");
      },
      "jquery": function(module, exports){
          module.exports = $;
      },
      "lodash": function(module, exports){
          module.exports = _;
      },
  });
  

  这样，你可以在页面中使用 CDN 引入的 jQuery 和 lodash，同时减小 bundle 的体积。

7. stats

stats: "errors-only"

• 作用：控制构建过程中控制台的输出内容。
• 可用值：
  • none：不输出任何内容。
  • errors-only：仅输出错误信息。
  • minimal：输出最少的信息。
  • normal：默认值，输出正常的信息。
  • verbose：输出详细的信息。
  • 更多：官方文档

总结

通过本课程，你已经了解了 webpack 配置中的一些高级选项，这些配置可以帮助你更精细地控制构建过程，优化构建性能，减少 bundle 体积，并提高开发效率。