引入html-webpack-plugin后Webpack与ifdef-loader编译出错求助

问题场景 #

在Laravel Mix搭配Webpack的环境中使用ifdef-loader进行条件编译，引入html-webpack-plugin后出现模块解析错误，请求协助排查。

webpack.mix.js配置 #

mix
    .webpackConfig(webpack => {
        return {
            module: {
                rules: [
                    {
                        use: [{
                            loader: "ifdef-loader",
                            options: ifdef_loader_opts,
                        }]
                    }
                ],
            },
            plugins: [
                new HtmlWebpackPlugin({
                    title: 'Output Management',
                }),
            ],
            output: {
                path: path.resolve(__dirname, 'public'),
                clean: true,
            }
        };
    })
    .setPublicPath('public')

    // other assets management

报错信息 #

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/ifdef-loader/ifdef-loader.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html>
  |   <head>
  ModuleParseError: Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/ifdef-loader/ifdef-loader.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html>
  |   <head>
      at handleParseError (/home/node/app/node_modules/webpack/lib/NormalModule.js:976:19)
      at /home/node/app/node_modules/webpack/lib/NormalModule.js:1095:5
      at processResult (/home/node/app/node_modules/webpack/lib/NormalModule.js:800:11)
      at /home/node/app/node_modules/webpack/lib/NormalModule.js:860:5
      at /home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:407:3
      at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
      at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
      at /home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:255:3
      at runSyncOrAsync (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:143:11)
      at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
  
  - NormalModule.js:976 handleParseError
    [app]/[webpack]/lib/NormalModule.js:976:19
  
  - NormalModule.js:1095 
    [app]/[webpack]/lib/NormalModule.js:1095:5
  
  - NormalModule.js:800 processResult
    [app]/[webpack]/lib/NormalModule.js:800:11
  
  - NormalModule.js:860 
    [app]/[webpack]/lib/NormalModule.js:860:5
  
  - LoaderRunner.js:407 
    [app]/[loader-runner]/lib/LoaderRunner.js:407:3
  
  - LoaderRunner.js:233 iterateNormalLoaders
    [app]/[loader-runner]/lib/LoaderRunner.js:233:10
  
  - LoaderRunner.js:240 iterateNormalLoaders
    [app]/[loader-runner]/lib/LoaderRunner.js:240:10
  
  - LoaderRunner.js:255 
    [app]/[loader-runner]/lib/LoaderRunner.js:255:3
  
  - LoaderRunner.js:143 runSyncOrAsync
    [app]/[loader-runner]/lib/LoaderRunner.js:143:11
  
  - LoaderRunner.js:251 iterateNormalLoaders
    [app]/[loader-runner]/lib/LoaderRunner.js:251:2
  
  - child-compiler.js:169 
    [app]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:551 finalCallback
    [app]/[webpack]/lib/Compiler.js:551:5
  
  - Compiler.js:577 
    [app]/[webpack]/lib/Compiler.js:577:11
  
  - Compiler.js:1196 
    [app]/[webpack]/lib/Compiler.js:1196:17
  
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5
  


1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

问题原因 #

你给ifdef-loader配置的规则没有指定匹配的文件类型，导致Webpack会用它处理所有文件，包括html-webpack-plugin生成的HTML文件。但ifdef-loader是为JS/TS等脚本文件设计的，无法解析HTML语法，因此触发了模块解析错误。

解决方案 #

修改webpack规则，给ifdef-loader添加test字段，限定它只处理目标脚本文件（比如.js、.ts、.vue等，根据你的项目需求调整），避免处理HTML文件。

修改后的webpack.mix.js代码：

const path = require('path');

mix
    .webpackConfig(webpack => {
        return {
            module: {
                rules: [
                    {
                        // 仅匹配JS/TS/Vue文件，按需调整
                        test: /\.(js|ts|vue)$/,
                        use: [{
                            loader: "ifdef-loader",
                            options: ifdef_loader_opts,
                        }]
                    }
                ],
            },
            plugins: [
                new HtmlWebpackPlugin({
                    title: 'Output Management',
                }),
            ],
            output: {
                path: path.resolve(__dirname, 'public'),
                clean: true,
            }
        };
    })
    .setPublicPath('public')

    // other assets management

额外提示：如果你的需求只是编译前清理输出目录，Laravel Mix本身提供了clean()方法，无需依赖html-webpack-plugin的clean配置，直接调用mix.clean()就能简化配置。

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