实用的 Webpack 配置项

如何指定 Alias

resolvealias 在引用 js/css 等文件的时候如果不希望记忆前面的路劲，可以使用 alias

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

import Utility from '../../utilities/utility';

解决 css 晚于 DOM 渲染好导致的 Flash_of_unstyled_content 问题

css-loader 会在 js 加载好以后，将样式代码以行内的格式插入到页面中，晚于 DOM 渲染，使用 mini-css-extract-plugin 可以提前将css打包到指定文件夹，然后在html的head中提前引入就可以解决这个问题了。

npm i -D mini-css-extract-plugin

在 webpack 的配置文件中增加如下代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //...
  plugins: [
      // ...
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
  ],

  {
      test: /\.css$/,
      use: [
        // 'style-loader',
        {
          loader: MiniCssExtractPlugin.loader
        },
      ]
  ]
}

在打包成功后可以看到

Entrypoint index = vendors~index~login.css vendors~index~login.bundle.js vendors~index.css vendors~index.bundle.js index.css index.bundle.js
Entrypoint login = vendors~index~login.css vendors~index~login.bundle.js login.css login.bundle.js

将对应的 css 文件，插入到 html 的 link 中，形成引用即可：

index.html

<link rel="stylesheet" href="./vendors~index~login.css ">
<link rel="stylesheet" href="./vendors~index.css ">
<link rel="stylesheet" href="./index.css ">

login.html

<link rel="stylesheet" href="./vendors~index~login.css ">
<link rel="stylesheet" href="./vendors~login.css ">
<link rel="stylesheet" href="./index.css ">

对打包的 css 文件进行压缩，提高下载速度

发布到线上环境的时候，可以将 CSS 进行压缩，在 prod 的 webpack 中配置可以使用 optimize-css-assets-webpack-plugin

npm i -D optimize-css-assets-webpack-plugin

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
      splitChunks: {
        chunks: 'all',
      },
  }
}

公司项目使用 css-extract 和 optimize 后的 js/css 大笑变化：

注：空单元格代表跟左边一列相等；n/a 表示没生成