webpack官方文档并没有如何引入公共html文件的说明，这一点是在翻了N多资料后才发现的，最终的方案是：
去掉webpack.config.js文件中配置的全局html-loader，这样html模版文件就不会被html-loader解析，我们可以使用ejs语法嵌入其他html页面和图片资源。因为没了全局的html-loader解析html文件，使用ejs语法嵌入的资源返回的是ejs代码，还需要使用html-loader来解析成html代码。

（html-loader!）表示引用html-loader这个加载器来解析

<%= require('html-loader!../layout/header.html') %>

但是这样将全局html-loader去掉后，又碰到了下面的问题。

jsp变量的引入

vm中有时需要直接引用后端的变量，如${cssUrl}，就像这样：

这时候webpack打包居然就报错了，报错了：

原因排查

出现这个问题的原因应该是由于HtmlWebpackPlugin这个插件引用的模版默认是ejs，当不使用全局html-loader的时候，模板文件其实是以ejs解析的，而${cssUrl}在ejs中也识别为一个变量，当然就报错了。

解决方法

这过程中，整个周末都在想这个问题，甚至已经开始考虑用gulp+webpack的方案了。。

又翻了很多资料，突然想到既然是ejs模板，可以尝试了一些ejs去写，而不是非要把这个模板以html的方式loader进来，然后就有了如下方法：

<link href="<%= '${cssUrl}' %>" rel="stylesheet">

这时候就被识别为一个字符串了！成功解决。

进一步探索，巧用node环境变量

上面的方法解决的其实也是挺丑的，因为本地开发的时候需要引用本地文件的，上线的时候又得傻乎乎地去一个个地方去替换：

<!-- <link href="<%= skinCss %>" rel="stylesheet"> --> <link href="/skins/pay/pay.css" rel="stylesheet">

然后马上试了下，在模板文件中用ejs去读node环境变量process.env.NODE_ENV，果然能取到值，就有了下面这个相对完美的方案：

<% if (process.env.NODE_ENV === 'production') { skinCss = '${cssUrl}'; } else { skinCss = '/skins/pay/pay.css'; } %> <link href="<%= skinCss %>" rel="stylesheet">

其中production就是利用node启动webpack时配置的，在这里派上了大用场。

End

到这里，我们奇货商城已经实现了前端工程自动化，再也不用一遍又一遍地去vm里修改路径，人工去记着改了哪些文件，要上传哪些静态资源。更加不用担心漏传什么资源文件而导致线上bug辣。:)

posted @