3

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

我正在尝试找出一项任务是否可以使用当前代码（包括插件等）。我们使用HtmlWebpackPlugin并为它提供一个自定义模板，要求它在结束 body 标签附近注入 script 标签。它工作正常，但我们想要的是能够控制注入到 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，但这不太可维护。

建议？

蒂亚！

临时解决方案

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

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

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

4

2 回答 2

0

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

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

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

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

在我的路由器中：

router.templateConfig = {
  fileHash: null,
};

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

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

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

于 2016-07-11T17:36:45.477 回答
0

我确实使用 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。

您可以在我的回答中找到另一个参考：为什么我的 webpack bundle.js 和 vendor.bundle.js 如此之大？

于 2016-07-11T18:39:35.017 回答