webpack plugin (插件)
01 webpack基本概念
02_webpack 基本命令
03_webpack loader的作用
05_webpack devserver模式
06_weboack vue开发环境配置
07_webpack 打包体积分析
插件给webpack提供了很多方便的功能,在进行打包时,利用插件可以解决我们的很多问题
插件就是普通的nodejs模块,所以使用插件时需要下载,并且在 webpack.config.js
中引入
如何使用插件
// 具体如何引入需要看对应插件的文档
const 插件 = require("插件模块")
module.exports = {
entry: "",
output: {
filename: "",
path
},
plugins: [
new 插件模块({})
]
}
插件列表
clean-webpack-plugin
当我们进行打包时,自动删除上次打包的dist目录,如果不写配置,则需要我们写 output
的 path配置,这样,该插件才会自动删除对应生成的打包文件夹
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
...,
output: {
filename: '',
path: __dirname + "/dist"
},
plugins: [
new CleanWebpackPlugin()
]
}
html模板插件
下载 html-webpack-plugin
yarn add html-webpack-plugin -D
在项目目录里创建对应的模板,可以创建在 /public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 可以获取到页面中的配置 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div>
文字
<p>文字</p>
<i class="iconfont icon-sousuo"></i>
</div>
</body>
</html>
配置插件
module.exports = {
...,
plugins: [
new HtmlWebpackPlugin({
title: '页面的标题',
template: '模板的路径'
}),
// 如果想生成多个页面,继续new
new HtmlWebpackPlugin({
title: '页面的标题',
template: '模板的路径'
}),
]
}