作用
plugins 和vue的生命周期有些类似，它会在打包的某个时期帮助你完成一些事情
示例
htmlWebpackPlugin
htmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中。
npm install html-webpack-plugin -D
默认
按这种方式生成的html文件内没有任何标签
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
使用模板
src文件夹下可以新建一个index.html文件，按正常的方式书写HTML，里面可以预先放置一些带类名的标签，当打包完成后，会以此文件为模板，将打包后的js文件注入。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
})]
};
CleanWebpackPlugin
CleanWebpackPlugin 会在打包开始前将制定的目录下的文件全部清空。
npm install clean-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
}), new CleanWebpackPlugin(['dist'])]
};
问题
CleanWebpackPlugin插件默认根路径是当前目录，所以当位置文件放在build文件夹下后，插件清理的是build文件夹下的dist文件夹，而不是与build同级的dist文件夹。所以要改变插件的根路径
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin( ['dist'], {
root: path.resolve(__dirname, '../')
})
]
output可以通过../找到上一级
output: {
path: path.resolve(__dirname, '../dist') // 文件夹
}
