webpack4 plugins 篇

demo 代码点此，篇幅有限，仅介绍几个常用的。

start

什么是 plugins ?

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

plugins 可用于执行范围更广的任务，如打包优化，资源管理和重新定义环境中的变量。

HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件，并帮你引入 webpack 打包好的 js 等文件.

安装：

npm i -D html-webpack-plugin

在 webpack.config.js 中配置：

const path = require('path');

+ const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  // mode: 'production',

  mode: 'development',

  // 入口

  // entry: './src/index.js',

  entry: {

    main: './src/index.js',

  },

  module: {...},

+  plugins: [

+    new HtmlWebpackPlugin({

+      title: 'webpack4 plugins 篇',

+      template: './src/index.html'

+    }),

+  ],

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

然后在 src 目录下创建 index.html 作为模板：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>

  <div id="root"></div>

</body>

</html>

CleanWebpackPlugin

用于删除/清除构建文件夹的 webpack 插件，其实就是打包前先把 dist 文件夹清空。

依然是安装：

npm i -D clean-webpack-plugin

然后配置：

// webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

  mode: 'development',

  entry: {

    main: './src/index.js',

  },

  module: {...},

  plugins: [

    new HtmlWebpackPlugin({

      title: 'webpack4 plugins 篇',

      template: './src/index.html'

    }),

+    new CleanWebpackPlugin(),

  ],

  // 出口

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

  },

}

HotModuleReplacementPlugin

模块热替换插件，即 HMR，webpack4 自带插件，无需安装，在开发者模式下配合devServer使用。

注意: 永远不要在生产环境(production)下启用 HMR

安装 webpack-dev-server：

npm i -D webpack-dev-server

配置：

// webpack.config.js

...

+ const webpack = require('webpack');

module.exports = {

  mode: 'development',

  entry: {

    main: './src/index.js',

  },

  module: {...},

  plugins: [

    new HtmlWebpackPlugin({

      title: 'webpack4 plugins 篇',

      template: './src/index.html'

    }),

    new CleanWebpackPlugin(),

+   new webpack.HotModuleReplacementPlugin(),

  ],

+  devServer: {

+    contentBase: path.resolve(__dirname, "dist"),

+    // 启用 gzip

+    compress: true,

+		 open: true,

+    port: 9000,

+    hot: true,

+    hotOnly: true,

+  },

  // 出口

  output: {...},

}

然后在 package.josn 中的 script 里配置命令，方便实用。

// package.json

...

"scripts": {

+ "start": "webpack-dev-server",

  "bundle": "webpack"

},

...

然后跑命令：

npm start

接着修改 index.less，切回浏览器，你会发现 css 效果已经改了。

可以试试修改 js 模块看看效果，修改 index.js：

// index.js

// 在最后面加上这段代码

...

+ if (module.hot) {

+   module.hot.accept('./components/Header', () => {

+     Header();

+   })

+ }

然后重新启动 webpack-dev-server，再修改 Header.js：

// Header.js

...

header.innerText = '修改后的header';

...

再切回浏览器，你会发现新增了一个修改过的 Header。

miniCssExtractPlugin

mini-css-extract-plugin 将CSS提取到单独的文件中，类似功能的有 extract-text-webpack-plugin(已废弃)，两者相比，mini-css-extract-plugin 的优点：

异步加载
没有重复的编译（性能）
更容易使用
特定于CSS

安装：

npm i -D mini-css-extract-plugin

然后配置：

// webpack.config.js

...

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

module.exports = {

  mode: 'development',

  entry: {...},

  module: {

    rules: [

    ...

    {

      // 打包 css、less

      test: /\.(css|less)$/,

      use: [

        // 这里一定要加

 +       {

 +         loader: MiniCssExtractPlugin.loader,

 +       },

        {

          loader: 'css-loader',

          options: {

            importLoaders: 2,

          }

        },

        'less-loader',

        'postcss-loader',

      ],

    }],

  },

  plugins: [

    ...

+    new MiniCssExtractPlugin({

+      filename: 'css/[name].css',

+     chunkFilename: 'css/[id].css',

+    }),

  ],

  devServer: {...},

  // 出口

  output: {...},

}

接着执行npm run bundle打包，你会发现 css 都打包起来了。

PurgecssPlugin

可以去除未使用的 css，一般与 glob、glob-all 配合使用。

安装：

npm i -D purgecss-webpack-plugin glob

配置：

// webpack.config.js

...

+ const glob = require('glob');

+ const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {

  mode: 'development',

  entry: {...},

  module: {...},

  plugins: [

    ...

+    new PurgecssPlugin({

+      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`,

+      {

+        // 不匹配目录，只匹配文件

+        nodir: true,

+      }),

+    }),

  ],

  devServer: {...},

  // 出口

  output: {...},

}

optimizeCssAssetsWebpackPlugin

在 production 下打包，js 文件是会自动压缩的，但 css 不会，所以使用 optimize-css-assets-webpack-plugin 进行压缩 css。

安装：

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

配置：

// webpack.config.js

...

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

module.exports = {

  mode: 'development',

  entry: {...},

  module: {...},

  plugins: [

    ...

+   new OptimizeCssAssetsPlugin(),

  ],

  devServer: {...},

  // 出口

  output: {...},

}

打包后，你会发现 css 文件都压缩好了。

备注

篇幅有限，所以就不多 bb 了。