webpack生成html文件，用于后端渲染的研究

不适用后端渲染的原因

webpack的打包方式是把所有的资源都打包成bundle.js，并用一个没有内容的html引入生成的bundle.js，不太熟悉的同学可以参看慕课网的视频教程。但是如果公司的建站方式是后端渲染的话（如jsp），那就不能使用webpack了，因为webpack会把html也打包在bundle.js中。本文就是介绍如何用webpack生成我们需要的html，以及其中的问题和优化。

主要思路

webpack的html-webpack-plugin插件，可以设置一个template，我们可以在这个template上做文章，配合上相应的loader，就可以生成我们需要的html。

项目结构

下面是我的webpack目录结构

HTML部分

如何生成我们需要的html文件呢？

html-webpack-plugin的使用

我们采用曲线救国的方式生成我们需要的html，用于后端渲染。这就要使用到html-webpack-plugin的template属性。

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),    // 生成一个空的html，用于引入webpack打包好的js文件
    new HtmlWebpackPlugin({     // 再生成一个html
      filename: 'test.html',
      template: 'src/assets/test.html'    //注意这里可以使用一个template作为要生成的html的模板
    })
  ]
}

上面代码中的template这里是一个html，官方的介绍是，你可以使用jade或ejs等模板引擎，也就是说webpack不关心你使用什么作为模板，只要输出一串字符串就行，于是我大胆的使用一个js文件作为模板，输出一段字符串，结果完全可行。

这样就产生了很多种方案，比如用js文件作为模板，在这个js文件中require其他的html文件，进行字符串拼接，最后输出，但是这样的话，每个