let HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ....省略 plugins:[new HtmlWebpackPlugin({ //自动插入到dist目录中 template:'./index.html' //使用模板 filename:'login.html' //产出名称(一般不写) })] }
build之后你就可以看到dis下有一个index.html文件
7. 开发环境
一个项目创建分为开发环境和生产环境（上线），那么在开发的时候每次都需要build很不方便，而且build之后相当于最终的代码，不能随意更改，我们需要把这些内容都放到内存中，通过npm run dev打开
npm install webpack-dev-server --save-dev
这里边内置了服务，可以帮我们启动一个端口号，当代码更新时，自动在内存中打包，代码有变化就重新执行
并且在package.json添加一个新脚本："dev":"webpack-dev-server --mode development"
一般webpack-dev-server会内置一个端口，通过这个端口就能查看编译的内容了，比如我的端口号：:8080
8. 配置vue
上面我们已经实现了基本的webpack配置，完成了html、css、less、图片、js等文件的解析，但我们最终想要的适合vue-cli一样的效果，这就要求我们还要对vue语法进行解析，如果你在main.js引入vue模块，使用vue时，你会发现控制台打印这样的错误
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
这是因为默认的vue引用的是vue.runtime.common.js，不能编译模板，你可以在引入vue的时候直接import Vue from 'vue/dist/vue'
另外一种办法是，你可以使用render函数，注意render()要有返回值
但是不管是改变vue引用js还是使用render函数都是不方便的，我们更希望页面组件能以.vue文件加载到html文件中
我们可以通过安装vue-loader（解析.vue文件）和vue-template-compiler（解析template模板）实现
npm install vue-loader vue-template-compiler --save-dev
之后我们在main.js引入App.vue模块，然后在render()引用：render:(h)=>h(App)
最后
到这里我们就实现了和vue-cli初始化出来的vue项目一样的效果，其实整个过程并不算太难，不过一步步实现还是很有帮助，vue初学者可以动手试试。当然，文章可能会有我疏忽的地方，有问题随时联系我呀~