Webpack常用plugins
HtmlWebpackPlugin
HtmlWebpackPlugin在webpack打包结束后会在输出目录中生成一个HTML文件，并且自动引入打包生成的js文件，而且我们也可以指定一个html模板，用于自动生成的html文件
使用HtmlWebpackPlugin首先需要使用npm install html-webpack-plugin -D安装该插件，并编写以下规则（输出和模式采用默认了）
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入HtmlWebpackPlugin插件
module.exports = {
entry: {
main: "./index.js" //入口文件路径
},
plugins: [new HtmlWebpackPlugin({ //在插件数组中实例化该插件提供的对象
template: "./index.html" //设置html模板的路径
})]
}
在output中设置publicPath参数，可在引入js的标签中增加前缀，通常用于引入CDN资源，对于第三方库也可以使用externals参数进行排除打包，用于引入CDN
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入HtmlWebpackPlugin插件
module.exports = {
entry: {
main: "./index.js" //入口文件路径
},
externals: {
jquery: "$", //忽略jquery的库打包，该项的key是库名，值为需要外部的变量名
},
output: {
filename: "main.js", //输出文件名
path: path.resolve(__dirname, "dist"), //输出文件根目录
publicPath: "http://cdn.example.com" //之后引入main.js会是http://cdn.example.com/main.js
},
plugins: [new HtmlWebpackPlugin({ //在插件数组中实例化该插件提供的对象
template: "./index.html" //设置html模板的路径
})]
}
多页面打包设置引入不同的js文件
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入HtmlWebpackPlugin插件
module.exports = {
entry: {
main: "./index.js", //入口文件路径1
test: "./test.js" //入口文件路径1
},
output: {
filename: "main.js", //输出文件名
path: path.resolve(__dirname, "dist") //输出文件根目录
},
plugins: [new HtmlWebpackPlugin({ //第一个页面
template: "./index.html", //设置html模板的路径
filename: "index1.html", //生成的html文件名
chunks: ["main"] //生成时要引入的chunk，entry中的key值，若代码分隔时还需要加上代码分隔的chunk
}),new HtmlWebpackPlugin({ //第二个页面
template: "./index.html", //设置html模板的路径
filename: "index1.html", //生成的html文件名
chunks: ["test"] //生成时要引入的chunk，entry中的key值，若代码分隔时还需要加上代码分隔的chunk
})]
}
CleanWebpackPlugin
CleanWebpackPlugin在webpack打包前将输出目录清空，CleanWebpackPlugin属于第三方插件
使用HtmlWebpackPlugin首先需要使用npm install clean-webpack-plugin -D安装该插件，并编写以下规则（输出和模式采用默认了）
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //引入CleanWebpackPlugin插件
module.exports = {
entry: {
main: "./index.js" //入口文件路径
},
output: {
filename: "main.js", //输出文件名
path: path.resolve(__dirname, "dist") //输出文件根目录
},
plugins: [new CleanWebpackPlugin()]//在插件数组中实例化该插件提供的对象
//要注意的是必须指定输出，否则该插件会失效
}
MiniCssExtractPlugin
MiniCssExtractPlugin用于将CSS提取到单独的文件中，为每个包含CSS的JS文件创建一个CSS文件，并且支持CSS和SourceMaps的按需加载
使用CssMinimizerWebpackPlugin首先需要使用npm install mini-css-extract-plugin -D安装该插件，并编写以下规则（输出和模式采用默认了）
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入MiniCssExtractPlugin插件
module.exports = {
entry: {
main: "./index.js" //入口文件路径
},
module: {
rules: [{
test: /\.css$/, //使用正则匹配到以css结尾的文件
use: [ //使用多个loader进行打包时要使用数组形式
{
loader: MiniCssExtractPlugin.loader, //使用MiniCssExtractPlugin插件中自带的loader将css内容提取出来
options: { publicPath: '../' } //配置公共路径
//若不配置会报错，或者图片引入错误，由于filename配置的是./css/，所以需要返回一级目录
//注意图片引入需要url-loader或url-loader
},
"css-loader" //使用css-loader进行打包
]
}]
},
plugins: [new MiniCssExtractPlugin({
filename: "./css/[name].css", //其中name对应的就是main
//chunkFilename: "./css/[name].chunk.css" //异步加载的css所生成的文件名，异步加载参考CodeSplitting
})] //在插件数组中实例化该插件提供的对象
}
PWA
渐进式网络开发应用程序可以将网页像app一样，利用浏览器缓存在离线状态下也可以访问，要想使用该技术，则需要使用npm install workbox-webpack-plugin -D安装该插件，并编写以下规则（输出和模式采用默认了）
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入HtmlWebpackPlugin插件
const workboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = {
entry: "./index.js", //入口文件路径
plugins: [new HtmlWebpackPlugin({ //在插件数组中实例化该插件提供的对象
template: "./index.html" //设置html模板的路径
}), new workboxWebpackPlugin.GenerateSW({ //仅做简单配置即可
clientsClaim: true,
skipWaiting: true
})]
}
之后打包会多两个文件，其中就有service-worker.js，之后需要再在业务代码中添加以下判断客户端是否支持PWA技术并手动注册
if ("serviceWorker" in navigator) { //浏览器支持serviceWorker
window.addEventListener("load", () => { //当页面加载完毕时
navigator.serviceWorker.register("/service-worker.js") //注册serviceWorker，service-worker.js是打包生成的
.then(registration => {
console.log("serviceWorker 已启用");
})
.catch(error => {
console.log("serviceWorker 启动失败");
})
})
}
Comments NOTHING