分享15個Webpack實用的插件！！！

前言

初衷： 分享一下工做中實用的幾個Plugin，但願對你們有些幫助，不喜勿噴。javascript

html-webpack-plugin

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

安裝html

cnpm i html-webpack-plugin@3.2.0 -D
複製代碼

配置前端

index.htmlvue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
複製代碼

webpack.config.jsjava

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

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

clean-webpack-plugin

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

安裝git

cnpm i clean-webpack-plugin -D
複製代碼

配置github

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
}
複製代碼

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

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期好文

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《帶你輕鬆理解數據結構之Map》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

《你真的瞭解ES6中的函數特性麼？》