对webpack常用的plugin作一个整合👌.

webpack

更新

[2019-1-21]

Added

  • Initial release

[2019-4-26]

Changed

  • 更换文章title为猎奇系列
  • 文章格式调整

一、html-webpack-plugin

自动生成并管理 index.html 文件

1
2
3
4
5
6
7
{
  plugins: [
    new htmlWebpackPlugin({
      title: '',
    })
  ],
}

二、mini-css-extract-plugin

分离.css文件到单独trunk, 代替 extract-text-webpack-plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const envMode = process.env.NODE_ENV !== 'production';

{
  plugins: [
    new miniCssExtractPlugin({
      filename: devMode
        ? '[name].css'
        : '[name.[hash].css]',
      chunkFilename: devMode
        ? '[id].css'
        : '[id].[hash].css',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: devMode
              ? 'style-loader'
              : miniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2,
            },
          },
          { loader: 'postcss-loader' },
          { loader: 'less|sass-loader' },
        ],
      }
    ],
  },
}

三、optimize-css-assets-webpack-plugin

压缩 .css 文件, 与 postcss 插件功能相同, 都使用了 cssnano.

1
2
3
4
5
{
  plugins: [
    new optimizeCssAsstesWebpackPlugin(),
  ],
}

四、cssnano

压缩css文件

五、colors

给terminal的log日志添加颜色

1
console.log('colors'.green);

六、webpack-dev-server

热部署服务器

package.json

1
2
3
scripts: {
  "start": "webpack-dev-server"
}

webpack.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  devServer {
    open: true,
    hot: true,
    port: 3333,
    compress: true,
    clientLogLevel: 'none',
    before(app) {
      console.log(
        `App running at http://localhost:${this.port}`.green
      );
    },
  },
}