webpack html-webpack-plugin,可以使用条件注释导入入口脚本吗?

标签 webpack

我有多个条目,例如:

entry: {
  foo: 'foo.js'
  bar: 'bar.js'
  ie: 'ie.js'
},
output: {
  path: path.join(__dirname, '/dist/'),
  filename: '[name]-[hash].min.js'
}

当我使用 HtmlWebpackPlugin 时,导入或不导入条目是肯定的,使用 block 。 我希望在 HTML 文件中生成条件注释,例如:

<!--[if lte IE 9]>
  <script type="text/javascript" src="ie-12dx....js"></script>
<![endif]-->

关于如何实现这一点有什么想法吗?

最佳答案

感谢jantimon - html-webpack-plugin 的合作者。

You have to create a custom index file: https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_index.html#L15

根据自定义索引文件的例子,我自己做了:

我的脚本:

<!--[if lte IE 9]>
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
{% if (/^ie-\w+\.min\.js$/.test(o.htmlWebpackPlugin.files.chunks[chunk].entry)) { %}
<script type="text/javascript" src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}></script>
{% } %}
{% } %}
<![endif]-->

效果很好!

关于webpack html-webpack-plugin,可以使用条件注释导入入口脚本吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34609442/

相关文章:

javascript - Webpack:如何将类构造函数暴露给浏览器的全局命名空间

javascript - Webpack 初始化失败

node.js - 从 dist 文件夹运行服务器时,cross NODE_ENV 不起作用

javascript - 构建 react 应用程序的版本,提供指向 CSS 和 JS 文件的错误链接

node.js - Webpack 开发服务器到 Node/IIS

angular - 如何使用 Angular 在 HMR 期间保留状态

angular - 如何使用 angular-cli 构建生成多个 html 文件?

node.js - Express 抛出 404 url​​ 中是否有点 - Vue、webpack

javascript - 要求未在脚本标记中定义

vue.js - 如何在没有 vue-cli 的情况下使用 vue-loader