Webpack初学：webpack安装和命令行-原创手记-慕课网

mkdir //新建文件夹
npm init // 在项目中引导创建一个package.json文件。安装包的信息可保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用，也说package.json在项目中是必不可少的。

npm install webpack --save-dev //下载webpack

npm install css-loader style-loader -save-dev //下载用于适配css文件的loader

webpack -g //查看webpack命令

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' //绑定css的loader

--watch //文件更新时自动打包
--progress //查看打包过程
--progress -dispaly-modules //列出打包模块
--display-reasons //打包原因

webpack --config webpack.dev.config.js     //修改默认配置文件

webpack.config.js配置
官方文档：
需要先引入path模块， const path = require('path')
然后再在output中设置path:path.resolve(__dirname,'dist/js')

const path = require('path');
module.exports ={
  entry: './src/script/main.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  }
}

一、如果想用不同的模版生成不同的html文件，只用在plugins里添加各种htmlWebpackPlugin的实例就好了。
二、页面中引入inline的script
github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代码。
三、htmlWebpackPlugin.files.chunks.entry就是chunks输出的地址
四、main以inline的形式引进，a,b,c以外链的形式引进
1、index.html中
（1）在htmlWebpackPlugin的配置中有一个有一个参数chunks可以配置。
（2）head中
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
重点：！！！compilation.assets是webpack暴露出来可以获取文件数据的方法。通过传文件名路径进这个对象，拿到这个文件的索引，通过调用source拿到文件内容。
compilation.assets需要的是不带publicPath，htmlWebpackPlugin.files.chunks.main.entry带publicPatch，所以用substr()截取。
（3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %>
（4）config.js中inject为false
五、小结
1、html和动态生成的文件一一对应。
2、htmlWebpackPlugin，如何自定义html，并且通过模板，参数如何传参。
3、多页面时，如何通过htmlWebpackPlugin生成多个html
4、深入探究通过htmlWebpackPlugin，结合模板的方式把生成的js，通过inline引入到html中。