html-webpack-plugin
effect
- effect1 将首页的html打包至output目录
- effect2 将多个html页面打包，并分别设置对应的入口js
- effect3 压缩打包后的html文件
usage
npm i html-webpack-plugin -D
var HtmlWebpackPlugin = require('html-webpcak-plugin');
var package = require('./package.json');
module.exports = {
entry: {
app: './src/app.js',
main: './src/main.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js'
},
plugins: [ //此处为数组，module为对象
new HtmlWebpackPlugin({
title: package.name, // 此处可自定义任意名称 模板文件的title的固定写法： <title><%= htmlWebpackPlugin.options.title %></title>
filename: 'app.html', //打包后的文件名称 默认放置output根目录下
template: './app_template.html', //开发目录下的app.html
chunks: ['app'] // 'app'为entry中的key值，代表打包后的html中引入的入口文件，如果为空则一个都不引入。如果不配置chunks，默认全部引入。
inject: 'body', // 如果为false，则不引入chunks指定的入口文件。如果为body或head则放置对应的模块尾部。
minify: {
removeAttributeQuotes: true, //删除引号
collapseWhitespace: true // 压缩成一行 删除空格
}
}),
new HtmlWebpackPlugin({ // 多个html，配置多个实例即可
filename: 'main.html',
template: './main_template.html',
chunks: ['main']
}),
]
}
clean-webpack-plugin
effect
usage
npm i clean-webpack-plugin -D
- step2: configure the webpack.config.js
var { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 3.0及以上版本的写法需要进行解构赋值。3.0以下无需解构。
plugins: [
new CleanWebpackPlugin() // 3.0版本及以上写法 3.0以下写法 new CleanWebpackPlugin(['dist'])
]
