Html-Loader造成的编译异常

[SHADOW-LI0327]

异常情况

会有类似Cannot read properties of undefined (reading 'is')的异常，通过debug排查
具体问题出现在以下位置

preheatANode(proto.aNode, this);

    this.tagName = proto.aNode.tagName;
    this.source = typeof options.source === 'string'
        ? parseTemplate(options.source).children[0]
        : options.source;
    // 这个方法传入的this.source为undefined
    preheatANode(this.source);
    proto.aNode._i++;

解决方法，初步设想是loader的问题，最终定位到html-loader与babel-loader

需要将html-loader的esModule设为false即可
如果使用babel-loader, 需要exclude中添加san的过滤

package.json

{
  "dependencies": {
    "san": "^3.11.1"
  },
  "devDependencies": {
    "babel-loader": "^8.0.6",
    "html-loader": "^3.0.1",
    "san-loader": "^0.3.3"
  },
  "browserslist": "> 0.25%, not dead"
}

webpack.config.js

module.exports = (env, argv) => {
  return {
    plugins: [
      new SanLoaderPlugin()
    ],
    module: {
      rules: [
         {
          test: /\.san$/,
          use: [
            { loader: 'san-loader' }
          ]
        },
        {
          test: /\.js?$/,
          // 去除san
          exclude: /(node_modules|bower_components|.*\.san)/,
          loader: 'babel-loader'
        },
        {
          test: /\.html$/,
          loader: 'html-loader',
          options: {
            // 两个参数改为false
            esModule: false,
            minimize: false
          }
        }
      ]
    }
  }
}

如果有碰到类似问题的，希望能有帮助