Javascript 将另一个入口文件添加到 webpack 而不注入 HTML 文件

发布于06月24日

我正在使用CRA和CRACO将另一个条目文件添加到Web包配置中.

代码如下:

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

但是，我不需要将此文件注入HTML文件，可以这样做吗？

推荐答案

这样做很容易.CRACO和最终CRA使用html-webpack-plugin生成HTML文件并添加所需的script个标记.您必须使用chunk filtering来实现这一点.

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  webpack: {
    configure: (webpackConfig, {paths}) => {

      // 1. Find instance of HTML Webpack plugin
      const pluginInstance = webpackConfig.plugins.find(
        webpackPlugin => webpackPlugin instanceof HtmlWebpackPlugin
      );

      // 2. Define the exclusion or inclusion
      if (pluginInstance) {
        pluginInstance.options.excludeChunks = ['content'];
        
        // Or, alternately, use include only feature
        // pluginInstance.options.chucks = ['main'];
      }

      return {
        ...webpackConfig,
        entry: {
          main: paths.appIndexJs,
          content: './src/chromeServices/DOMEvaluator.ts',
        },
      }
    },
  },
};