owlnas

前言

首页，我要解释下为什么要用html-webpack-plugin的自定义功能。对于一般的单页页面应用来说，直接用html-webpack-plugin的默认配置，就已经足够。但是遇到前后端不分离的项目，后端往往需要使用后端模板生成一个完整页面时，前端直接用html-webpack-plugin生成一个完整页面给后端，那么就有点麻烦了。后端需要手动修改css以及js的文件名(为了减少用户缓存的影响，新的css、js都是hash后缀)。所以采取html-webpack-plugin的自定义方式打包成后端需要的js以及css。

简单来说，需要打包分块的html片段。

实现

style.html(tpl,ejs.....)


<link rel="stylesheet" type="text/css" href="/dist/1.0.6/css/main.a9c63028.css">

js.html(tpl,ejs.....)


<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>

这样后端就可以直接用这些打包后的html片段生成需要的页面，也可以随意控制 js片段放的位置，放在head或放在body中。

html-webpack-plugin的参数说明

https://github.com/jantimon/html-webpack-plugin

html-webpack-plugin 在打包过程中，模板可以接收到以下格式的参数


"htmlWebpackPlugin": {

  "files": {

    "css": [ "main.css" ],

    "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],

    "chunks": {

      "head": {

        "entry": "assets/head_bundle.js",

        "css": [ "main.css" ]

      },

      "main": {

        "entry": "assets/main_bundle.js",

        "css": []

      },

    }

  }

}

那么在模板中就可以获取打包后的js、css的完整名称路径。

模板引入css

打包前：


<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.files.css %>">

打包后：


<link rel="stylesheet" type="text/css" href="/dist/1.0.6/css/0.a9c63028.css">

webpack中的htmlWebpackPlugin配置

以上面将主要js以及css分开打包为例，那么webpack中就要引入两个htmlWebpackPlugin配置。

htmlWebpackPlugin配置

将inject 改为 inject: false是很重要的，表示 htmlWebpackPlugin不会自动就把css、js插入到打包后的html中。


plugins: [

    new HtmlWebpackPlugin({

        inject: false,

        cache: false,

        template: './frontSrc/ejs/js.html',

        filename: 'assets/html/js.html',

    }),

    new HtmlWebpackPlugin({

        inject: false,

        cache: false,

        template: './frontSrc/ejs/js.html',

        filename: 'assets/html/js.html',

    }),

]

模板

模板的默认语法时ejs的

模板示例:

css.html


<% for (var num in htmlWebpackPlugin.files.css) { %>

  <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.files.css[num] %>">

<% } %>

js.html


<% for (var num in htmlWebpackPlugin.files.js) { %>

  <script src="<%= htmlWebpackPlugin.files.js[num] %>"></script>

<% } %>

总之，就是利用htmlWebpackPlugin在打包过程中传入的模板对象，来自定义页面。