webpack相关

在 webpack < 4 的版本中，通常将 vendor 作为一个单独的入口起点添加到 entry 选项中，以将其编译为一个单独的文件（与 CommonsChunkPlugin 结合使用）。而在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks 选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。不要 为 vendor 或其他不是执行起点创建 entry。

Loader

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。

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

Q：sideEffects在webpack打包的时候有什么用？

在Webpack中，sideEffects是一个用于标记模块是否有副作用（side effect）的配置选项。副作用是指模块在导入时对全局状态进行修改或对环境造成其他影响，例如修改文件系统、发起网络请求等。对于没有副作用的模块，Webpack可以利用这个信息进行Tree Shaking（摇树优化），将未被使用的代码从最终的打包文件中删除，以减小打包文件的体积。

sideEffects的值可以是一个布尔值或一个数组。如果值为false，表示该模块没有副作用，可以进行Tree Shaking优化；如果值为true或者数组中包含"*"，表示该模块具有副作用，不可进行Tree Shaking优化；如果值为一个数组，数组中包含的字符串表示该模块具有副作用的文件路径或通配符。

例如，如果你的项目中有一个模块app.js，它没有副作用，那么可以在它的代码中添加如下注释：

/*#__PURE__*/ // 声明该模块没有副作用
export function add(x, y) {
   
  return x + y;
}

然后在Webpack的配置文件中添加以下配置：

module.exports = {
   
  // ...
  module: {
   
    rules: [