创建优化生产构建时遭遇模块解析失败问题求助

问题详情 #

模块解析失败：意外标记 (256:123)
文件已通过以下加载器处理：

• ./node_modules/babel-loader/lib/index.js
  可能需要额外的加载器来处理这些加载器的输出结果。

报错代码片段：

var gen_bitlen = function gen_bitlen(s, desc) /*    deflate_state *s;*/ /*    tree_desc *desc;    */ the tree descriptor */{
|   var tree = desc.dyn_tree;
|   var max_code = desc.max_code;

解决方案 #

• 修复语法错误：报错行存在注释语法问题，最后一段注释the tree descriptor */缺少开头的/*，导致解析失败。修正后的代码应为：

  var gen_bitlen = function gen_bitlen(s, desc) /* deflate_state *s; */ /* tree_desc *desc; the tree descriptor */ {
    var tree = desc.dyn_tree;
    var max_code = desc.max_code;
  }
  

• 校验babel-loader配置：确保webpack配置中正确设置了babel-loader处理.js文件，示例配置如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

• 安装必要依赖：若缺少babel相关依赖，执行以下命令安装：

  npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
  

• 调整文件匹配规则：如果报错文件来自node_modules，需修改webpack规则，将该包加入include列表，让babel-loader处理它：

  {
    test: /\.js$/,
    include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/目标包名')],
    use: 'babel-loader'
  }
  

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