※项目使用前文webpack起步建立的项目
随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。
1、index.html自动生成，防止入口脚本名字修改还要再手动修改index.html
1)安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
2)新增src/print.js文件
export default function print() {
console.log('print js print infomation!');
}
3）更改wenpack配置文件webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: '输出管理'
})
]
}
4、构建前目录结构
webpack-demo
|- webpack.config.js // webpack配置文件
|- package.json
|- /src // 新增src源代码文件夹
|- index.js // 新增js文件
|- print.js
|-/dist
5、构建工程
npm run build
6、构建后目录结构
webpack-demo
|- webpack.config.js // webpack配置文件
|- package.json
|- /src // 新增src源代码文件夹
|- index.js // 新增js文件
|- print.js
|- /dist
|- app.bundle.js
|- print.bundle.js
|- index.html
7、浏览器打卡index.html 验证结果
