我正在使用HtmlWebpackPlugin将javascript注入到我的模板文件中:
<html>
...
<body>
...
<?php echo $this->inlineScript(); ?>
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
</body>
</html>
但是,我需要在PHP代码<?php echo $this->inlineScript(); ?>
之前注入生成的bundle,以使内联脚本正常工作(它们需要JQuery,将在vendor.js中加载)。
结果应为:
<html>
...
<body>
...
<script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
<?php echo $this->inlineScript(); ?>
</body>
</html>
有没有办法实现这一点?也许可以使用像<%= htmlWebpackPlugin.options.??? %>
或类似的占位符?如果它不与HtmlWebpackPlugin一起工作,是否有其他webpack插件可以使用?
3条答案
按热度按时间ct3nt3jp1#
好了,我想明白了。把下面的代码放在你想包含js文件的地方:
并将HtmlWebpackPlugin选项中的
inject
设置为false。请记住,你需要手动注入其他东西(css, meta标签等)。F.e. CSS:
du7egjpx2#
为了解决这个问题,我做了以下事情:
(1)安装HtmlWebpackPlugin(https://www.npmjs.com/package/html-webpack-plugin)
(2)更新我的webpack配置
(3)在我的模板中添加这些标签。这将告诉webpack在哪里放置CSS和JS文件。
cpjpxq1n3#
不知道我是不是太晚了,但是你可以使用script-ext-html-webpack-plugin。这可以将脚本设置为
defer
,它可以推迟执行,直到DOM被解析。另外,你可以将这个脚本注入到html的head
中,以并行方式开始获取它,但在最后执行: