准备
新增一个 print.js
并且在index.js中使用它
详见官网教程
练习Demo
设定 HtmlWebpackPlugin
在上面的步骤我们可以得到两个bundle.js文件，并在index.html中手动引入了它们
但每次这样会很麻烦，所以我们使用HtmlWebpackPlugin插件来帮我们
npm install --save-dev html-webpack-plugin
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
运行npm run build，查看编辑器里的代码，你会发现它们的变动，那是HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。
清理 /dist 文件夹
我们每次编译都会生成文件到/dist文件夹，但是并不是所有的文件都一直用到，现在我们使用clean-webpack-plugin插件来自动清理那些遗留的文件
npm install clean-webpack-plugin --save-dev
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！
