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

NeoChang

1.4k53048

发布于
2018-11-08

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

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

尝试过哪些方法

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

求助

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

webpack vue.js javascript

阅读 13.4k

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>
...

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

yuanxiaowa

10.1k3938

发布于
2018-11-08

直接把你的代码写在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') {
    //生产
  }

};

王_ye

3442512

发布于
2018-11-09

你可以做多个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"',
   ...
}