使用CRACO配置webpack时如何新增不注入HTML的入口文件

问题场景 #

在CRA项目中使用CRACO修改webpack配置新增额外入口时，默认配置如下：

module.exports = {
  webpack: {
    configure: (webpackConfig, {paths}) => {
      return {
        ...webpackConfig,
        entry: {
          main: paths.appIndexJs,
          content: './src/chromeServices/DOMEvaluator.ts',
        },
      }
    },
  },
}

上述配置新增了指向./src/chromeServices/DOMEvaluator.ts的content入口，默认情况下该入口的打包产物会和main入口产物一起被自动注入到生成的HTML文件中，需要实现content入口产物正常打包但不注入HTML的效果。

实现方式 #

核心逻辑是修改CRA内置的html-webpack-plugin配置，通过chunks参数显式指定允许注入HTML的入口列表，不在列表内的入口产物不会被注入。不需要额外安装依赖，直接修改CRACO配置即可：

module.exports = {
  webpack: {
    configure: (webpackConfig, { paths }) => {
      // 配置多入口
      webpackConfig.entry = {
        main: paths.appIndexJs,
        content: './src/chromeServices/DOMEvaluator.ts',
      }

      // 遍历webpack插件列表，修改html-webpack-plugin的注入规则
      webpackConfig.plugins.forEach(plugin => {
        if (plugin.constructor.name === 'HtmlWebpackPlugin') {
          // 仅声明需要注入到HTML的入口，其余入口产物不会被注入
          plugin.userOptions.chunks = ['main']
        }
      })

      return webpackConfig
    },
  },
}

注意事项 #

• 该修改方式不会破坏CRA内置的html-webpack-plugin默认规则（包括模板路径、资源压缩、publicPath适配等），兼容性优于重新实例化插件覆盖配置的方案
• 打包后content入口对应的产物会正常输出到build目录，仅不会出现在生成的HTML的<script>/<link>标签中
• 如果后续新增其他不需要注入HTML的入口，只需要在entry中新增对应入口配置即可，不需要修改chunks列表；如果有新的入口需要注入HTML，把对应入口名追加到chunks数组中即可

内容的提问来源于stack exchange，提问作者Edgar Barber