介绍
1.什么是插件(plugin)?
plugin 用于扩展webpack的功能
当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域。
而plugin的功能更加的丰富，而不仅局限于资源的加载。
HtmlWebpackPlugin
2.什么是HtmlWebpackPlugin?
HtmlWebpackPlugin会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中
3.HtmlWebpackPlugin使用
https://www.webpackjs.com/plugins/html-webpack-plugin/
3.1安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
3.2配置HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()]
4.HtmlWebpackPlugin高级使用
https://github.com/jantimon/html-webpack-plugin#configuration
默认情况下HtmlWebpackPlugin生成的html文件是一个空的文件,
如果想指定生成文件中的内容可以通过配置模板的方式来实现
plugins: [new HtmlWebpackPlugin({
template: "index.html"
})]
默认情况下生成html文件并没有压缩,
如果想让html文件压缩可以设置
plugins: [new HtmlWebpackPlugin({
// 指定打包的模板, 如果不指定会自动生成一个空的
template: "./index.html",
minify: {
// 告诉htmlplugin打包之后的html文件需要压缩
collapseWhitespace: true,
}
})]
clean-webpack-plugin
1.什么是clean-webpack-plugin?
webpack-clean-plugin会在打包之前将我们指定的文件夹清空
应用场景每次打包前将dist目录清空, 然后再存放新打包的内容, 避免新老混淆问题
3.clean-webpack-plugin使用
https://github.com/johnagan/clean-webpack-plugin
3.1安装clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
3.2配置clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [new CleanWebpackPlugin()]
copy-plugin
1.什么是copy-webpack-plugin?
在打包项目的时候除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包
文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可
那么这个时候我们就可以使用copy-plugin来实现文件的拷贝
3.copy-webpack-plugin使用
https://www.webpackjs.com/plugins/copy-webpack-plugin/
3.1安装copy-webpack-plugin
npm install --save-dev copy-webpack-plugin
3.2配置copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [new CopyWebpackPlugin([
{from:"doc", to:"./doc"}
])];
mini-css-extract-plugin
1.什么是mini-css-extract-plugin?
mini-css-extract-plugin是一个专门用于将打包的CSS内容提取到单独文件的插件
前面我们通过style-loader打包的CSS都是直接插入到head中的
2.mini-css-extract-plugin使用
https://webpack.js.org/plugins/mini-css-extract-plugin/
2.1mini-css-extract-plugin安装
npm install --save-dev mini-css-extract-plugin
2.2配置mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: './css/[name].css',
})
2.3替换style-loader
loader: MiniCssExtractPlugin.loader,
注意点: 如果相关文件资源无法显示, 需要根据打包后的结构手动设置公开路径
options: {
publicPath: "xxx"
}
压缩css代码
3.mini-css-extract-plugin压缩css
https://www.npmjs.com/package/mini-css-extract-plugin
3.1安装JS代码压缩插件
npm install --save-dev terser-webpack-plugin
3.2安装CSS代码压缩插件
npm install --save-dev optimize-css-assets-webpack-plugin
3.3导入插件
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3.4配置webpack优化项
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}
注意: 由于配置了webpack的optimization.minimizer项目会覆盖默认的JS压缩选项,
所以JS代码也需要通过插件自己压缩
webpack-HMR-热更新
1.什么是HMR?
1.1通过webpack-dev-server自动打包并没有真正的放到指定的目录中
因为读写磁盘是非常耗时和消耗性能的,
所以为了提升性能webpack-dev-server将转换好的内容直接放到了内存中
1.2通过webpack-dev-server可以实现实时监听打包内容的变化,
每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页
所以给我们带来了很多不便, 这时就需要通过HMR插件来优化调试开发
1.3HMR(HotModuleReplacementPlugin)热更新插件,
会在内容发生改变的时候时时的更新修改的内容但是不会重新刷新网站
2.HMR使用:
HotModuleReplacementPlugin是一个内置插件, 所以不需要任何安装直接引入webpack模块即可使用
2.1在devServer中开启热更新
hot: true, // 开启热更新
hotOnly: true // 即使热更新不生效，浏览器也不自动刷新
2.2在webpack.config.js中创建热更新插件
new Webpack.HotModuleReplacementPlugin()
注意点:
如果是通过style-loader来处理CSS, 那么经过前面两步就已经实现了热更新
如果是通过MiniCssExtractPlugin.loader来处理CSS, 那么还需要额外配置MiniCssExtractPlugin.loader
options:{
hmr: true
}
1.JS模块使用HMR注意点?
import "./index.less"
对于css模块而言, 在css-loader中已经帮我们实现了热更新, 只要css代码被修改就会立即更新
import copy from "./test.js"
但是对于js模块而言, 系统默认并没有给我们实现热更新, 所以修改了js模块代码并不会立即更新
2.JS模块如何实现热更新?
2.1手动监听模块变化
// 判断当前有没有开启热更新
if(module.hot){
// 告诉热更新需要监听哪一个JS模块的变化
module.hot.accept("./test.js", function () {
let oSpan = document.querySelector("span");
document.body.removeChild(oSpan);
addSpan();
});
}
