1. html-webpack-plugin
作用:如果没有html模版,用它来创建html;或者有html的情况下,来修改html, 生产环境会自动压缩html 和js
用法:
plugins: [
new htmlWebpackPlugin(),
]
!!!注意 开放性使用file-loader 可能会导致html-webpack-plugin的崩溃, 具体表现为出现.bin、.esj、 以及标签只有head的情况
目前的解决办法是保守使用file-loader处理一些特殊的文件,用test而不是exclude
2. clean-webpack-plugin
作用:每次打包清除dist以前打包的内容,还你一个清爽,我最喜欢这个插件了
用法:
// 注意是export 不是export default
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin()
],
3. mini-css-extract-plugin
作用:体验style-loader , 从js中提取css成为单独文件, 为生产环境使用
用法 分1,2: 注意不要写错位置
1. 现在plugin中使用
plugins: [
new MiniCssExtractPlugin()
],
2. 替换style-loader在module.rules中作用:
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
4. optimize-css-assets-webpack-plugin
注意此插件 可能需要cnpm下载 cnpm i optimize-css-assets-webpack-plugin -D
作用:压缩css
用法:
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 在plugins 中使用
plugins: [
new HtmlWebpackPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/main.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
],
5. workbox-webpack-plugin
作用:pwa
用法:
// 分为两步实现
// 第一步 webpack.config.js
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
new WorkboxWebpackPlugin.GenerateSW({
/**
* 1.帮助serviceWorker 快速启动
* 2,移除旧的serviceWorker
* 3,生成一个serviceWorker文件
* */
clientsClaim: true,
skipWaiting: true
})
// 第二步 在主代码中注册
if('serviceWorker' in navigator){
// 页面加载完成后加载serviceWorker
window.addEventListener('load',()=>{
navigator.serviceWorker.register('/service-worker.js')
.then(res=>{console.log('注册serviceWorker成功')})
.catch(res=>{console.log('注册serviceWorker失败')})
})
}
6. Webpack.DllPlugin
作用:生成 mainfest.json 建立起 当前打的包和node_modules中的对应包的关系
用法:
const Webpack = require('webpack');
// 生成 mainfest.json 建立起 当前打的包和node_modules中的对应包的关系
new Webpack.DllPlugin({
name: '[name]___[hash]', // 映射库里的内容 名称 和library 要一致
path: resolve(__dirname,'dll/manifest.json') // 输出文件的路径
})
7. Webpack.DllReferencePlugin
作用:告诉webpack 那些不用参与打包,同时使用时 名称也需要变化一下
用法:
const Webpack = require('webpack');
new Webpack.DllReferencePlugin({ // 告诉webpack 那些不用参与打包,同时使用时 名称也需要变化一下
manifest: resolve(__dirname,'dll/manifest.json')
}),
8. AddAssetHtmlWebpackPlugin
作用: 把资源引入 并输出到html中作为cdn本地资源使用
用法:
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
new AddAssetHtmlWebpackPlugin([{ // 把资源引入 并输出到html中作为cdn本地资源使用
filepath: resolve(__dirname,'dll/jquery.js'),
publicPath: '',
}])