Webpack 使用（三）

前言
前面我们只是讲的如何将js文件打包以及将css文件引入js文件后打包，当打包后集成在html我们只是直接在index.html文件中引入我们预先设置好的js打包后文件名
<script type="text/javascript" src="hello.bundle.js"></script>
显然这是不够的，实际开发通常是多页面，并且有许多打包后的文件，我们不可能在每个页面都预设好js打包后文件名（如hello.bundle.js）

---

html-webpack-plugin

webpack有许多插件提供给我们，我们可以在npm官网https://www.npmjs.com/找到自己需要的插件。html-webpack-plugin可以简化HTML文件的创建。

---

html-webpack-plugin 的使用

• 通过npm下载插件
• 首先还是在webpack.config.js配置文件下，引用插件
• 前面webpack config也提到有一选项plugin，正是在这项下配置我们的插件
• 多个页面的情况下我们只需要new多个htmlWebpackPlugin，并进行配置，具体的配置选项可以参考https://www.npmjs.com/package/html-webpack-plugin
  
  • template：模板
  • inject：false不会默认引入，’body’，’head’自动注入标签中
  • filename：打包后文件名
  • chunks：只允许添加一些块，与entry是对应的
  • excludeChunks：除去添加的模块
  • minify：压缩

---

示例准备

• 依然使用dist目录来放打包后文件，下面再建立一个js文件夹放js文件
• 建立src文件夹存放开发的文件，目录下再新建js和style文件夹分别存放js文件和css文件，js文件夹下建立main.js，a.js，b.js

• 我们讲前面讲的css-loader、style-loader一起使用，则在a.js，b.js加入style-loader和css-loader,并在src/style下新建style.css文件，可以写一些样式实验
  require('style-loader!css-loader!../style/style.css');

• 下面我们就可以进行最关键的步骤了，在webpack.config.js文件中为插件进行配置

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        main:'./src/js/main.js',
        a:'./src/js/a.js',
        b:'./src/js/b.js'
    },
    output:{
        path:  __dirname + '/dist',
        filename:'js/[name].bundle.js' //讲js区别放入dist下的js文件夹下
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'index.html',
            inject:'body',
            filename:'index.bundle.html',
            chunks:['main'],
            title:'ni hao'
        }),
        new htmlWebpackPlugin({
            template:'index.html',
            inject:'body',
            filename:"index.a.html",
            chunks:['main','a'],
            title:'a'
        }),
        new htmlWebpackPlugin({
            template:'index.html',
            inject:'body',
            filename:'index.b.html',
            chunks:['main','b'],
            title:"b"
        })
    ]
}

• 在命令行中执行npm run webpack，这样我们就大功告成
  

---

更多

上面可以看到我们可以通过new htmlWebpackPlugin为页面参照不同的模板、引入不同的js文件来进行打包，而在引入的js中我们使用style-loader、css-loader还可以将css文件引入进来，这样我们就不会像原来那样不断的分别请求引入那么多的js文件和css文件

---

htmlWebpackPlugin对象中有options和files两个属性，files内有publicPath 、chunks 、js 、css 、manifest ，而options内是我们配置的各个选项template 、inject、filename、hash、title、chunks等等

---

关于html-webpack-plugin插件的配置选项中inject是设置是否自动注入到打包后的html文件中，我们可以自己手动进行设为inline内联形式，这样能够减少http请求提升页面的性能。

• htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)可以取到不带publicPath的路径（js/main.bundle.js）
• compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()可以实现inline引入
• 例

<% for(var key in htmlWebpackPlugin.files.chunks){%>
        <% if(key=='b'){%>
            <%=htmlWebpackPlugin.files.chunks[key].entry%>
            <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[key].entry%>"></script>
        <% } %>
    <%}%>

我们可以通过ejs的形式进行inline引入，本例引入chunks为'b'时才进行inline引入，这样我们就减少了一个http请求

参考文档

https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

---