webpack使用raw-loader內聯靜態資源失效

失效代碼
<script>${ require('raw-loader!babel-loader!./page/demo.js') }</script>

原因及解決辦法
由於html-webpack-plugin解析語法的改變，將${ "code" }寫法改爲了<%= "code" %>
將原有的寫法改爲新寫法即可

// 由於html-webpack-plugin解析語法的改變，將${ "代碼" }標識符改爲了<%= "代碼" %>
<script><%=require('raw-loader!babel-loader!./page/demo.js')%></script>

順便說一下[email protected]，對比了一下raw-loader新版本的源碼。發現問題出在導出語法上。
新版本的raw-loader，默認情況下，raw-loader生成使用ES模塊語法的JS模塊。

老版本 0.5.1
module.exports = function(content) {
    this.cacheable && this.cacheable();
    this.value = content;
    // 0.5.1導出方式
    return "module.exports = " + JSON.stringify(content);
}

新版本
function rawLoader(source) {
  const options = (0, _loaderUtils.getOptions)(this);
  (0, _schemaUtils.default)(_options.default, options, {
    name: 'Raw Loader',
    baseDataPath: 'options'
  });
  const json = JSON.stringify(source).replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
  // 將true 改爲false
  const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
  /*const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;*/
  // esModule 控制導出方式
  return `${esModule ? 'export default' : 'module.exports ='} ${json};`; 
}

兼容辦法：在node_modules中找到raw-loader/dist/index中將esModule的默認值改爲false即可

如圖所示：