Webpack3的使用（二）
Webpack-v3.5.4的使用（一）中，提到：
目前html文件中只是引用一个script文件，且是固定的文件名，打包以后的文件名不确定，怎样避免手动设置路径？
那么接下来就是插件html-webpack-plugin登场了！
（一）、安装
1、安装插件 npm install html-webpack-plugin --save-dev
2、在webpack.config.js中引入插件
var htmlWebpackPlugin = require('html-webpack-plugin');
3、用plugins进行初始化
plugins: [
new htmlWebpackPlugin()
]
4、运行npm run webpack
注意：在这里如果webpack是全局安装的话运行npm run webpack会报错！首先运行npm link webpack 后再运行npm run webpack
（二）、dist中的index.html如何与src文件夹中的index.html代码同步
在plugins中传入参数：template: 'index.html'（且该模版是在根目录下）,src文件夹下index.html文件中手动引用的script标签即可并运行npm run webpack
（三）、目前所有生成的文件都在js文件夹下，不符合开发，index.html是在dist目录下的，如何分离
（四）、更复杂的应用（plugins中传其他参数）
1、改变某一部分的内容
src文件夹下的index.html文件title标签中的内容改为：
npm run webpack后dist目录下生成新的index.html文件，且title标签内容与设置的同步
2、将引入的js文件一部分放到head标签里一部分放到body标签里
参数inject值改为false
src文件夹下index.html代码改动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
<h1>欢迎来到WabPack世界！</h1>
<%= htmlWebpackPlugin.options.data %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry %>"></script>
</body>
</html>
3、打包以后跟上线的地址肯定不一样，那么就需要新属性
output: {
path:'./dist',
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://xxx.com/'
},
（五）、处理生成多页面应用
1、src中增加多个js文件后
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
plugins中设置多个new htmlWebpackPlugin并按照不同的需求写入代码
2、解决不同的页面引入不同的script，而不是固定指向
删除src中index.html中引入的js
运用参数chunks chunks: ['a','main']
参数excludeChunks指的是除了哪些，其他的都被指定，与chunks相反
3、部分js以外链形式引入，部分以内嵌放入
参数inject的值改为false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
<!-- 此部分是表示将js源码放入head标签中，而不是以引用外部链接的方式 -->
</script>
</head>
<body>
<% for(var k in htmlWebpackPlugin.files.chunks) { %>
<% if(k !== 'main') { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
<% } %>
<% } %>
<!-- 该部分还是以外部链接引用的方式引用js -->
</body>
</html>
以上是js更用打包用法，基础打包可以参考 Webpack-v3.5.4的使用（二）：http://blog.csdn.net/liuxin_1991/article/details/78834999
那么除了js的打包，经常见的loader又有什么用呢？下回笔记更新。。。 Webpack-v3.5.4的使用（三）
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
