开启HMR
用途：页面热更新（模块热替换）
首先我们要确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer:{
hot:true,
}
}
也可以在页面中开启HMR，比如下面这个例子：
// index.js
import { add } from 'util.js';
add(2,3);
if(module.hot){
module.hot.accept();
}
大多数时候，还是建议开发者使用第三方提供的HMR解决方案（比如react-hot-loader、vue-loader），因为HMR触发过程中可能会有很多意想不到的问题。
html-webpack-plugin
用途：自动打包生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin()
],
};
clean-webpack-plugin
在每次构建前清理 /dist 文件夹。
官方给的例子在新版本中运行不了，正确配置如下：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
...
plugins:[
new CleanWebpackPlugin()
],
}
extract-text-webpack-plugin(webpack 4之前版本)
用途：提取样式到css文件
在webpack.config.js中引入：
const ExtractTextplugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './app.js';
output: {
filename:'bundle.js',
},
mode:'development',
module: {
rules:[
{
test:/\.css$/,
use:ExtractTextplugin.extract({
fallback:'style-loader',
use:'css-loader',
})
}
]
},
plugins:[
new ExtractTextPlugin('bundle.css')
]
}
mini-css-extract-plugin(webpack 4及以上版本)
mini-css-extract-plugin可以理解成extract-text-webpack-plugin的升级版，它拥有更丰富的特性和更好的性能，从Webpack 4开始官方推荐使用该插件进行样式提取（Webpack 4以前的版本是用不了的）。
说到mini-css-extract-plugin的特性，最重要的就是它支持按需加载CSS，以前在使用extract-text-webpack-plugin的时候我们是做不到这一点的。举个例子，a.js通过import()函数异步加载了b.js，b.js里面加载了style.css，那么style.css最终只能被同步加载（通过HTML的link标签）。但是现在mini-css-extract-plugin会单独打包出一个0.css（假设使用默认配置），这个CSS文件将由a.js通过动态插入link标签的方式加载。
在webpack.config.js中引入：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './app.js',
output: {
filename:'[name].js',
},
mode: 'development',
module: {
rules: [{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../',
},
},
'css-loader'
],
}],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename:'[id].css',
})
]
}
压缩css
压缩CSS文件的前提是使用extract-text-webpack-plugin或mini-css-extract-plugin将样式提取出来，接着使用optimize-css-assets-webpack-plugin来进行压缩，这个插件本质上使用的是压缩器cssnano，当然我们也可以通过其配置进行切换。具体请看下面的例子：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
}
],
},
plugins: [new ExtractTextPlugin('style.css')],
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({
// 生效范围，只压缩匹配到的资源
assetNameRegExp: /\.optimize\.css$/g,
// 压缩处理器，默认为 cssnano
cssProcessor: require('cssnano'),
// 压缩处理器的配置
cssProcessorOptions: { discardComments: { removeAll: true } },
// 是否展示 log
canPrint: true,
})],
},
};
terser (webpack 4 集成)
压缩Javascript
// 自定义terser-webpack-plugin配置
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//...
optimization: {
// 覆盖默认的 minimizer
minimizer: [
new TerserPlugin({
/* your config */
test: /\.js(\?.*)?$/i,
exclude: /\/excludes/,
})
],
},
};
webpack-bundle-analyzer
用途： 分析打包后输出的bundle体积大小。
安装:
npm i webpack-bundle-analyzer -D
webpack.config.js配置：
const Analyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
...
plugins: [
new Analyzer()
],
}