HtmlWebpackPlugin
会在打包结束后,自动化生成一个html
文件,并把打包生成的js
文件自动引入到这个html
文件中。
安装
npm install --save-dev html-webpack-plugin
使用
修改webpack.config.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path');
module.exports = { mode: 'production', entry: './index.js', plugins: [ new HtmlWebpackPlugin({ template: 'index.html', filename: 'assets/admin.html' }) ] }
|
清除原来的打包文件
安装 npm install --save-dev clean-webpack-plugin
,使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| var CleanWebpackPlugin = require('clean-webpack-plugin') module.exports = { mode: 'production', entry: { main: './index.js', abc: './index.js' }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }), new CleanWebpackPlugin(['bundle']) ], output: { filename: '[name].js',
path: path.resolve(__dirname, 'bundle') }, }
|