如何webpack 4打包时,index.html 注入代码

NeoChang
  • 1.4k

关于index.html注入一些JS、CSS代码

有一些JS代码,如响应式、埋点上报代码,打包时直接写入index.html
需求:
1、根据环境不同,注入不同代码,如埋点在生产环境才注入
2、生产环境代码压缩

尝试过哪些方法

1、在 webpack3 环境下,曾经使用 asset-inject-html-webpack-plugin
2、使用 html-webpack-inline-source-plugin 会将所有代码内联

求助

是否有可行的方案解决,index.html 的内联代码的问题

回复
阅读 5.9k
6 个回答

其实这个很简单,利用 html-webpack-plugin 来做就可以。这个插件可以自定义一些配置参数的,并且还可以支持 ejs 等模板语法。因此可以定义一个当前的运行的环境变量,即开发还是生产。可以参考下面代码实现:

1,你的相关 webpack 配置文件

...
// html-webpack-plugin 配置
new HtmlWebpackPlugin({
    // 自定义参数
    isProd: process.env.NODE_ENV === 'production'
}),

2,然后修改你的 index.html

...
<body>
<% if (htmlWebpackPlugin.options.isProduction) {%>
<script src="埋点链接等"></script>
<% } %>
</body>
...

如有帮助,麻烦点击下采纳,谢谢~

直接把你的代码写在index.html里面不就好了

HtmlWebpackPlugin

plugins: [
        new HtmlWebpackPlugin({
            title: '',
            filename: 'index.html',
            template: path.resolve(__dirname, '../src/index.html'),
        }),
    ],

详细使用文档

ps: webpack4 判断生产开发环境

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    // 开发
  }

  if (argv.mode === 'production') {
    //生产
  }

};

你可以做多个index页面分别在不同的环境下使用
然后在build的时候分别打包不同的index作为主页
config/index.js中

 build: {
    // Template for index.html
    index: process.env.NODE_ENV === 'production' ? path.resolve(__dirname, '../dist/index.html') :  path.resolve(__dirname, '../dev/index.html'),

NODE_ENV是在各个打包配置文件里面定义的

'use strict';
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
   ...
}

问题解决了吗,我用的node的readline读取文件流,在html里面插入后端的模板的一些变量,可以试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏