分享 15 個 Webpack 實用的插件！

分享一下工作中實用的幾個Plugin，希望對大家有些幫助，不喜勿噴。

html-webpack-plugin

用途： 將一個頁面模板打包到 dist 目錄下，默認都是自動引入 js or css

安裝

cnpm i html-webpack-plugin@3.2.0 -D

配置

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <title>首頁</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // 以咱們本地的index.html文件爲基礎模板
            filename: "index.html",  // 輸出到dist目錄下的文件名稱
        }),
    ]
}

HtmlWebpackPlugin接收一個對象，裏面自行進行配置，詳細參見這裏

clean-webpack-plugin

用途： 用於每次打包 dist 目錄刪除

安裝

cnpm i clean-webpack-plugin -D

配置

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

extract-text-webpack-plugin

用途： 將css樣式從js文件中提取出來最終合成一個css文件，該插件只支持webpack4之前的版本，如果你當前是webpack4及以上版本那麼就會報錯。

安裝

cnpm i extract-text-webpack-plugin -D

配置

webpack.config.js

const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new extractTextPlugin({
            filename: "[name].css",
            allChunks: true
        })
    ]
}

上面配置中，extractTextPlugin.extract裏面參數fallback是當提取不成功時，就執行style-loader。use裏面是提取時使用css-loader進行轉換，plugins裏面的配置filename是最後合併完的.css文件名稱，當allChunks爲false時，只會提取初始化時的css文件，爲true時會提取異步的css文件。

mini-css-extract-plugin

用途： 該插件與上面的exract-text-webpack-plugin的一樣，都是將 css 樣式提取出來, 唯一就是用法不同，本插件的webpack4版本之後推薦使用

安裝

cnpm i mini-css-extract-plugin -D

配置

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   MiniCssExtractPlugin.loader,
                   "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[name].css"
        })
    ]
}

上面配置中，可以看到用法與exract-text-webpack-plugin不同，來看一下它們的區別。

loader配置沒有fallback
在plugin中設置filename同步加載資源名稱，還要指定異步加載css資源chunkFilename
該插件支持配置publicPath用來設置異步加載css的路徑
exract-text-webpack-plugin只會提取一個 css 文件，mini-css-extract-plugin會根據異步文件提取出來。

webpack.optimize.CommonsChunkPlugin

用途： 用於將頁面裏的公共代碼提取出來，從而進行優化加載速度，該CommonsChunkPlugin只支持Webpack4之前。

安裝

該插件是Webpack內置的，不需要安裝。

配置

main.js

import Vue from "vue"

webpack.config.js

module.exports = {
    entry: {
        main: "./main.js",
        vendor: ["Vue"]
    },
    plugins: [
        new Webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "[name].js"
        }),
        new Webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["vendor"],
            filename: "[name].js"
        })
    ]
}

上面配置中，我們把main.js及它裏面的依賴文件把Vue.js提取出來進行優化，避免每次打包或者每次訪問其它頁面都加載一個該js文件, 我們先是把Vue基礎環境提取出來，因爲基礎環境它幾乎不會改變，從而進行提取優化是必須的。再把Webpack運行時的代碼也提取出來, 這樣vendor就再次打包也不會變化，可以走瀏覽器緩存

optimization.SplitChunks

用途： 該功能與上面的webpack.optimize.CommonsChunkPlugin一樣，只不過optimization.SplitChunks是webpack4之後推薦使用的

安裝

內置的，不需要安裝。

配置

main.js

import Vue from "vue"
console.log(Vue)
import("./news")

news.js

import Vue from "vue"
console.log(Vue)

webpack.config.js

module.exports = {
    mode: "development",
    entry: {
        main: "./main.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/dist"
    },
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
}

上面配置中，splitChunks的chunks爲all是對所有的chunk都生效，默認只對async異步有效。

splitChunks默認情況下也有自動提取，默認要求如下：

被提取的模塊來自node_module目錄
模塊大於 30kb
按需加載時請求資源最大值小於等於 5
首次加載時並行請求最大值小於等於 3

DefinePlugin

用途： 用於注入全局變量，一般用在環境變量上。

安裝

無需安裝，webpack內置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.DefinePlugin({
           STR: JSON.stringify("蛙人"),
           "process.env": JSON.stringify("dev"),
            name: "蛙人"
        })
    ]
}

上面配置中，DefinePlugin接收一個對象，裏面的key值對應一個value值，這個value值是一個代碼片段，可以看上面name那個，會報錯 蛙人 is not defined，這裏需要注意，value值必須是一個變量或代碼片段。

ProvidePlugin

用途： 用於定義全局變量，如 100 個頁面都引入vue，每個頁面都引入只會增加工作量，直接在webpackProvide掛載一個變量就行，不用再去一一引入。

安裝

無需安裝，webpack內置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.ProvidePlugin({
            "Vue": ["vue", "default"] 
        })
    ]
}

上面配置中，ProvidePlugin接收一個對象，key值是使用的變量，value值第一個參數是Vue模塊，第二個參數默認取Es Module.default的屬性。import默認引入進來是一個 Es Module的對象，裏面有default這個屬性就是實體對象

hot-module-replacement-plugin

用途： 開啓熱模塊更新

安裝

無需安裝，webpack內置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.HotModuleReplacementPlugin()
    ]
}

IgnorePlugin

用途： 用於過濾打包文件，減少打包體積大小。

安裝

無需安裝，webpack內置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.IgnorePlugin(/.\/lib/, /element-ui/)
    ]
}

uglifyjs-webpack-plugin

用途： 用於壓縮js文件，針對webpack4版本以上。

安裝

cnpm install uglifyjs-webpack-plugin -D

配置

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
 optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
                exclude: /node_modules/
            })
        ]
    }
}

copy-webpack-plugin

用途： 用於將文件拷貝到某個目錄下

安裝

cnpm i  copy-webpack-plugin@6.4.1 -D

配置

webpack.config.js

const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "./main.js",
                    to: __dirname + "/dist/js",
                    toType: "dir"
                }
            ]
        })
    ]
}

上面配置中，將main.js拷貝到dist目錄下的js裏，toType默認是file，也可以設置爲dir，因爲我這dist目錄下沒有js目錄。

optimize-css-assets-webpack-plugin

用途： 用於壓縮 css 樣式

安裝

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

配置

webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
    plugins: [
        new OptimizeCssAssetsWebpackPlugin(),
    ]
}

imagemin-webpack-plugin

用途： 用於壓縮圖片

安裝

cnpm i imagemin-webpack-plugin -D

配置

webpack.config.js

const ImageminPlugin =  require('imagemin-webpack-plugin').default
module.exports = {
    plugins: [
        new ImageminPlugin({
             test: /\.(jpe?g|png|gif|svg)$/i 
        })
    ]
}

friendly-errors-webpack-plugin

用途： 美化控制檯，良好的提示錯誤,。我們不想自己的終端啓動亂糟糟的，比如這樣

示例

安裝

cnpm i friendly-errors-webpack-plugin -D

配置

webpack.config.js

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const devServer =  {
    publicPath: "/",
    port: 9527,
    host: "localhost",
    open: true,
    hotOnly: true,
    stats: 'errors-only'
}
module.exports = {
 plugins: [
  new FriendlyErrorsWebpackPlugin({
   compilationSuccessInfo: {
                notes: ['蛙人你好，系統正運行在http://localhost:' + devServer.port]
            },
            clearConsole: true,
  })
 ],
 devServer
}

運行完上面代碼。看如下結果

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/PJl_HCIFgDMMnZQOHZIjig

html-webpack-plugin

clean-webpack-plugin

extract-text-webpack-plugin

mini-css-extract-plugin

webpack.optimize.CommonsChunkPlugin

optimization.SplitChunks

DefinePlugin

ProvidePlugin

hot-module-replacement-plugin

IgnorePlugin

uglifyjs-webpack-plugin

copy-webpack-plugin

optimize-css-assets-webpack-plugin

imagemin-webpack-plugin

friendly-errors-webpack-plugin

猜你喜歡