标签：src relative 添加 tran 还需 msu add 怎么 _id
由于webpack已经帮我们处理好js之间的依赖关系，现在我们可以忽略js的加载顺序，而只要在index.html内使用<script>标签引入bundle.js即可。
开发阶段，index.html在根目录，script引入好像也没什么问题。
但在真实发布项目时，发布的内容js文件都在dist文件夹内。但dist文件夹中现在没有有index.html文件，怎么引入js文件? 那么打包js等文件好像毫无用处了。
现在我们的需求是
1.将index.html放到dist文件夹内
2.由于index.html的路径发生改变了，所以引入的路径也要做出的相应改变
这些修改都要手动操作，手动操作难免出错，这个时候我们就需要一个插件..
HtmlWebpackPlugin插件功能:
口在指定路径自动生成一个index.html文件（可指定模板生成）
口将打包好的js文件，自动通过script标签插入到body中
如果一个插件是webpack自带的，这时仅需导入即可；如果不是自带的，那就需要安装，然后再导入。
为了减少webpack的包体大小，大部分插件都不是webpack自带，需要自行安装。
1.安装htmlWebpackPlugin指令
npm i html-webpack-plugin --save-dev
2.修改webpack.config.js配置，先引用html-webpack-plugin插件，并添加plugins属性
3.运行npm run build指令，最后程序在dist文件夹自动生成一个index.html文件，此时无需我们再手动更改index.html的位置和引入js脚本.
4.由于我们使用webpack与vue协同开发，body体还需要一个div容器，用于绑定和挂载vue的元素，此时需要一个模板index.htm来生成。即dist文件夹下index.html需要根目录的index.html生成。修改根目录的index.html，并且给webpack.config.js下的htmlWebpackPlugin添加一个模板参数。
5.运行npm run build指令，最后程序在dist文件夹自动生成一个index.html文件
6.打开浏览器控制台，在控制台可看到相应的输出。
标签：src relative 添加 tran 还需 msu add 怎么 _id
原文地址：https://www.cnblogs.com/singledogpro/p/12030578.html
