分享15个Webpack实用的插件!!!
共 14409字,需浏览 29分钟
·
2021-04-16 21:45
前言
初衷: 分享一下工作中实用的几个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 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文件为基础模板
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
用途: 美化控制台,良好的提示错误,。我们不想自己的终端启动乱糟糟的,比如这样
![](https://filescdn.proginn.com/39842230a2b1c6e0d593a3bb1fa35d51/cf41127ceae0b3c20328e6944ed10df0.webp)
安装
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
}
运行完上面代码。看如下结果
![](https://filescdn.proginn.com/6559c2513e03228755cfa55e67bb65db/a43d7a99fcb2dadf83a4b8ecf67aca45.webp)
END
![](https://filescdn.proginn.com/5115640db57ea0d39fc4c9b0c6139a2f/049c74ab0d89057f1bc821ca17fbe29b.webp)
“分享、点赞、在看” 支持一波
往期好文
《聊聊什么是CommonJs和Es Module及它们的区别》
写作不易
「点赞」+「在看」+「转发」 谢谢支持
![](https://filescdn.proginn.com/607d0b4b02ab6d56ac4814a87075bac8/cde78c6c77691c4adf5ecbaeac3219a9.webp)
![](https://filescdn.proginn.com/6fd22637aa045eac461b31bb38f04842/224e3ca06f5c50f50b477e76fc47caf1.webp)
![](https://filescdn.proginn.com/2599505a26e772940f4c70dc12d5692e/0f190797f5f101b1b8be1c4d7ca48f4c.webp)
点个
![](https://filescdn.proginn.com/37974f6733f228524fb07cf31cb3fc46/883e698fc7f51fc1029534c27148f22d.webp)
在看
你最好看