|
分享一下工作中實用的幾個plugin希望對大家有些幫助,，不喜勿噴,。 html-webpack-plugin 用途： 將一個頁面模板打包到dist目錄下，默認都是自動引入js or css 安裝 cnpm i [email protected] -D
配置 index.html <!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.js const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './index.html', // 以咱們本地的index.html文件為基礎(chǔ)模板 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之前的版本,，如果你當(dāng)前是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里面參數(shù)fallback是當(dāng)提取不成功時,，就執(zhí)行style-loader,。use里面是提取時使用css-loader進行轉(zhuǎn)換，plugins里面的配置filename是最后合并完的.css文件名稱,，當(dāng)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不同,，來看一下它們的區(qū)別,。 - loader配置沒有fallback
- 在plugin中設(shè)置filename同步加載資源名稱，還要指定異步加載css資源chunkFilename
- 該插件支持配置publicPath用來設(shè)置異步加載css的路徑
- exract-text-webpack-plugin只會提取一個css文件,，mini-css-extract-plugin會根據(jù)異步文件提取出來,。
webpack.optimize.CommonsChunkPlugin 用途： 用于將頁面里的公共代碼提取出來，從而進行優(yōu)化加載速度,，該CommonsChunkPlugin只支持Webpack4之前,。 安裝 該插件是Webpack內(nèi)置的，不需要安裝,。
配置 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提取出來進行優(yōu)化，避免每次打包或者每次訪問其它頁面都加載一個該js文件, 我們先是把Vue基礎(chǔ)環(huán)境提取出來,，因為基礎(chǔ)環(huán)境它幾乎不會改變,，從而進行提取優(yōu)化是必須的。再把Webpack運行時的代碼也提取出來, 這樣vendor就再次打包也不會變化,，可以走瀏覽器緩存 optimization.SplitChunks 用途： 該功能與上面的webpack.optimize.CommonsChunkPlugin一樣,，只不過optimization.SplitChunks是webpack4之后推薦使用的 安裝 內(nèi)置的，不需要安裝,。
配置 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 用途： 用于注入全局變量，一般用在環(huán)境變量上,。 安裝 無需安裝,，webpack內(nèi)置
配置 webpack.config.js const Webpack = require("webpack")module.exports = { plugins: [ new Webpack.DefinePlugin({ STR: JSON.stringify("蛙人"), "process.env": JSON.stringify("dev"), name: "蛙人" }) ]}
上面配置中，DefinePlugin接收一個對象,，里面的key值對應(yīng)一個value值,，這個value值是一個代碼片段，可以看上面name那個,，會報錯 蛙人 is not defined,，這里需要注意，value值必須是一個變量或代碼片段,。 ProvidePlugin 用途： 用于定義全局變量,，如100個頁面都引入vue,，每個頁面都引入只會增加工作量，直接在webpackProvide掛載一個變量就行,，不用再去一一引入,。 安裝 無需安裝，webpack內(nèi)置
配置 webpack.config.js const Webpack = require("webpack")module.exports = { plugins: [ new Webpack.ProvidePlugin({ "Vue": ["vue", "default"] }) ]}
上面配置中,，ProvidePlugin接收一個對象,，key值是使用的變量,，value值第一個參數(shù)是Vue模塊,，第二個參數(shù)默認取Es Module.default的屬性。import默認引入進來是一個 Es Module的對象,，里面有default這個屬性就是實體對象 hot-module-replacement-plugin 用途： 開啟熱模塊更新 安裝 無需安裝,，webpack內(nèi)置
配置 webpack.config.js const Webpack = require("webpack")module.exports = { plugins: [ new Webpack.HotModuleReplacementPlugin() ]}
IgnorePlugin 用途： 用于過濾打包文件，減少打包體積大小,。 安裝 無需安裝,，webpack內(nèi)置
配置 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 [email protected] -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,，也可以設(shè)置為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').defaultmodule.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: ['蛙人你好,，系統(tǒng)正運行在http://localhost:' + devServer.port] }, clearConsole: true, }) ], devServer}
運行完上面代碼,。看如下結(jié)果
|
