码迷,mamicode.com
首页 > Web开发 > 详细

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

时间:2017-03-06 00:38:41      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:bpa   blog   index   基础上   png   save   生成   自动   com   

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件

1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev

技术分享

2.在webpack.config.js文件中,引入html-webpack-plugin插件

技术分享

3.输入命令:npm run webpack,编译打包

技术分享

可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此index.html与src文件夹下面的index.html并无关系

技术分享

src下面的index.html如下

技术分享

4.如果在此基础上编译生成新的html,需要配置webpack.config.js里面的html插件的参数

技术分享

编译打包之后,dist下的文件目录如下:

技术分享

编译生成的index.html文件如下

技术分享

5.但我们在平时项目中,并不希望html文件与js文件在同一级目录下,修改webpack.config.js文件中的output属性值

技术分享

输入命令:npm run webpack,编译打包后的目录为

技术分享技术分享

 

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

标签:bpa   blog   index   基础上   png   save   生成   自动   com   

原文地址:http://www.cnblogs.com/eyunhua/p/6507303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!