webpack基本配置

module.exports = {
  entry: {},  // 入口文件
  output: {}, // 出口文件
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          //// 抽离 css 为独立文件
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 抽离 css 为独立文件
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules
        use: {
          loader: 'babel-loader',
          options: {
            // 配置预设
            presets: ['@babel/preset-env'],
            plugins: [
              ['@babel/plugin-transform-runtime'] // 转换async await语法
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 对输出结果重命名
      filename: 'assets/css/[name].css'
    })
  ],
  optimization: {
    splitChunks: {
      // 缓存第三方库
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
    }
  },
    minimizer: [
      // 压缩 CSS 代码，仅在生产模式下有效
      new CssMinimizerPlugin()
    ],
  },
  externals: {
  }
};

JS高级语法处理

babel-loader

• babel-loader: webpack 应用babel 解析ES6的的桥梁，本身自己并不将 ES6转ES5
• @babel/core：babel核心代码，当webpack使用babel-loader处理文档时，babel-loader实际上调用了babel-core的api

• @babel/preset-env：babel预设，根据环境仅仅转译环境不支持的语法，而不知全部转换为es5

  npm i babel-loader @babel/core @babel/preset-env -D

  regeneratorRuntime

  regeneratorRuntime 是 webpack 打包生成的全局辅助函数，由 babel 生成，用于兼容 async/await 的语法。

  npm i @babel/runtime @babel/plugin-transform-runtime -D

  CSS处理

  抽离 CSS 代码为独立文件

  npm i mini-css-extract-plugin -D

  CSS 代码压缩（生产模式）

  npm i css-minimizer-webpack-plugin -D

  CSS 兼容性处理

  npm i postcss-loader postcss postcss-preset-env -D

  在根目录下创建 postcss.config.js 文件并进行配置

  module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // 其他选项
      },
    ],
  ],
  };

  Externals

  module.exports = {
  //...
  externals: {
    react: 'react',
  },
  // 或者
  externals: {
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_', // 指向全局变量
    },
  },
  // 或者
  externals: {
    subtract: {
      root: ['math', 'subtract'],
    },
  },
  };

  此语法用于描述外部 library 所有可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。subtract 可以通过全局 math 对象下的属性 subtract 访问（例如 window[‘math’][‘subtract’]）。

resolve解析

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
    // 能够使用户在引入模块时不带扩展： import File from '../path/to/file';
    extensions: ['.js', '.json', '.wasm'],
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js'),
    },
  },
};

• enforceExtension 如果是 true，将不允许无扩展名文件。默认如果 ./foo 有 .js 扩展，require(‘./foo’) 可以正常运行。但如果启用此选项，只有 require(‘./foo.js’) 能够正常工作。

  import Test1 from 'xyz'; // 精确匹配，所以 path/to/file.js 被解析和导入
  import Test2 from 'xyz/file.js'; /