webpack4 plugins 篇

時間 2019-12-13

標籤 webpack4 webpack plugins 简体版

原文原文鏈接

demo 代碼點此，篇幅有限，僅介紹幾個經常使用的。css

start

什麼是 plugins ?html

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.webpack

plugins 可用於執行範圍更廣的任務，如打包優化，資源管理和從新定義環境中的變量。git

HtmlWebpackPlugin

該插件將爲你生成一個 HTML5 文件，並幫你引入 webpack 打包好的 js 等文件.github

安裝：web

npm i -D html-webpack-plugin

在 webpack.config.js 中配置：shell

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 做爲模板：npm

<!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 文件夾清空。json

依然是安裝：api

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 了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。