webpack4 plugins 篇
，篇幅有限，仅介绍几个常用的。
start
什么是 plugins ?
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.
plugins 可用于执行范围更广的任务，如打包优化，资源管理和重新定义环境中的变量。
htmlwebpackplugin
该插件将为你生成一个 html5 文件， 并帮你引入 webpack 打包好的 js 等文件.
安装：
npm i -d html-webpack-plugin
在 webpack.config.js 中配置：
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 作为模板：
<!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 文件夹清空。
依然是安装：
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 了。