我可以自定义 WebPack 插入的“脚本”标签吗？答案

【问题标题】：Can I customize the 'script' tag WebPack inserts?我可以自定义 WebPack 插入的“脚本”标签吗？
【发布时间】：2016-07-11 14:47:50
【问题描述】：

所以我是 webpack 的新手，但阅读了很多。

我正在尝试找出一项任务是否适用于当前代码（包括插件等）。我们使用HtmlWebpackPlugin 并为其提供一个自定义模板，要求它在结束正文标记附近注入脚本标记。它工作正常，但我们想要的是能够控制注入到 html 模板中的标签。这是使用的默认标签：

<script src="/bundle.js"></script>

我们希望有一个自定义的脚本标签内容，而不是简单的脚本标签，像这样：

<script type="text/javascript">
    var bundleUrl;
    if( document.cookie.indexOf('LOCALHOST=')== -1 ){
        bundleUrl="/bundle.js"; // just an example...
    } else {
        bundleUrl = "http://localhost:8080/42565632a54c11195088 .bundle.js"; // use localhost source...
    }
    document.write(unescape('%3Cscript src="' + bundleUrl + '"%3E%3C/script%3E'));
</script>

以上将允许动态更改的 bundleUrl 在运行时根据 cookie 的存在而更改。

无法将上述内容硬编码到模板中的原因是因为在生产环境中，捆绑包具有哈希前缀...。

我知道我们可以实现这一点的唯一方法是扩展 HtmlWebpackPlugin，但这不太可维护。

建议？

TIA！

临时解决方案

不是最漂亮的，但它有效。我最终只是清空了“块” 部分并在模板中插入我的硬编码脚本标签。像这样：

plugins: [
  new HtmlWebpackPlugin({
    inject:   'body',
    template: 'my-template.html',
    filename: 'index.html',
    chunks: []
})

这有效地让 HtmlWebpackPlugin 获取源模板并对其进行转换，内部没有任何改变，只是根据需要将其作为 index.html 放置（我们的环境稍微复杂一些）。

【问题讨论】：

你看过github.com/numical/script-ext-html-webpack-plugin吗？

标签： javascript webpack html-webpack-plugin

【解决方案1】：

您使用什么模板语言？我不确定你的 cookie 要求，但我最终在我的模板中使用了这个：

{! cant have the hash here when using HMR !}
<script src="js/main{?config.fileHash}.{config.fileHash}{/config.fileHash}.js"></script>

..即，如果 config.fileHash 存在则打印出来，如果不存在则不要

这是使用 Dust.js 模板语法，但我相信你可以在其他人中做类似的事情。

在我的路由器中：

router.templateConfig = {
  fileHash: null,
};

fileHash 在产品构建时写入该配置：

router.templateConfig.fileHash = stats.toJson().hash;

（我对所有资产使用了一个哈希，但您可能对每个块的哈希使用相同的技术，尝试记录 console.log(stats.toJson())

【讨论】：

【解决方案2】：

我确实使用 HtmlWebpackPlugin 将脚本注入到我的 html 中，以控制我建议您使用节点环境变量直接从 webpack.config 构建它，它非常简单且效率更高。

在您的控制台中使用：

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

在你的 webpack 中添加：

var PROD = process.env.NODE_ENV == 'production';

在输出中你可以使用这个：

 output: {
    filename: PROD ? "[name].min.js" : "[name].js",
  },

在你的 package.json 添加脚本标签，只要确保在这里使用你的构建命令：

  "scripts": {
    "watch": "set NODE_ENV=development&&webpack --progress --colors --watch",
    "deploy": "set NODE_ENV=production&&webpack -p"
  },

对于产品发布，我建议您检查 UglifyJsPlugin。

您可以在我的回答中找到另一个参考：Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

【讨论】：