webpack学习篇3

自动化生成项目中的html

每次打包之后的文件名都是不确定的。每次都要手动去设html中引入的路径很麻烦。
借用webpack的插件来解决这个问题。

//先在项目中安装此插件
npm install html-webpack-plugin - -save-dev

如何使用：

//在webpack的配置文件中引入该插件
var htmlWebpackPlugin = require(‘html-we pack-plugin’)
module.exports = {
  plugins:[
    new htmlWebpackPlugin(
      filename: ‘index-[hash].html’,  //打包生成的html的名字
      template: ‘index.html’,  //以index.html为模版去打包生成html
      inject: ‘head’  //指定引入的脚本是放在head里还是body里
    )
  ]
}

当entry传入的是一个对象（多页面应用），意味着有多个页面，就需要去生成多个html。

module.exports = {
  new htmlWebpackPlugin({
    filename: ‘a.html’,
    template: ‘index.html’,
    inject: ‘body’,
    title: ‘this is a.html’,
    chunks: [‘main’, ‘a’]  //页面所对应的js文件
  }),
  new htmlWebpackPlugin({
    filename: ‘b.html’,
    template: ‘index.html’,
    inject: ‘body’,
    title: ‘this is b.html’,
    chunks: [‘b’],  //页面所对应的js文件
    excludeChunks: [‘a’]  //排除文件，除了a其他的都要
  })
}

把初始化的脚本直接嵌入到页面，而不是以连接的形式引入到页面，现在都是<script></script>标签引入的，会增加http的请求。
如果直接调用nodejs读取文件直接读取想要引入的文件有一点问题，就是如果直接引用了这个文件是不会经过webpack处理的。
如果想要引入经过webpack流处理过后的文件代码如下：

<script type=‘text/JavaScript’>
  <% = compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length).source()] %>
</script>

引入的是main.js。打包完成后的index.html的<script>标签里就会有main.js的内容