Question

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

我要尝试找出其是否可以使用当前代码（包括插件等）来完成一项任务。我们使用HtmlWebpackPlugin并为其提供自定义模板，要求它在关闭body标记附近注入脚本标记。它工作正常，但我们想要的是能够控制注入到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的存在而更改。

以上无法硬编码到模板中的原因是因为在生产环境中，bundle有一个哈希前缀......。

我意识到我们可以实现这一目标的唯一方法是扩展HtmlWebpackPlugin，但这样做的可维护性较差。

建议？

TIA！

临时解决方案

不是最漂亮的，但它确实有效。我结束了刚刚清空的大块＆＃39; 部分并在模板中插入我的硬编码脚本标记。像这样：

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

这有效地让HtmlWebpackPlugin获取源模板并对其进行转换，内部不做任何更改，但只需将其作为index.html（我们的环境稍微复杂一些）。

Answer 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在prod build上写入该配置：

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

（我为所有资产使用了一个哈希值，但你可以对每个块哈希使用相同的技术，尝试记录console.log（stats.toJson（））

Answer 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?

我可以自定义＆＃39;脚本＆＃39;标签WebPack插入？

临时解决方案

2 个答案: