vue-loader 结合 esbuild-loader 使用报错，error: Do not know how to load path xxx/xxx.vue

错误

Uncaught Error: Module build failed (from ./node_modules/esbuild-loader/dist/index.cjs):
Error: Transform failed with 1 error:
error: Do not know how to load path: D:\custom-loader\vue\comp.vue

解决方法

在 esbuild-loader 的options 里加入 loader: 'js'

const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')

webpack({
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    publicPath: 'static'
  },
  devtool: 'source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.[jt]sx?$/,
        use: [{
          loader: 'esbuild-loader',
          options: {
          	loader: 'js',  //  <-- 加上这句
            target: 'es2015'
          }
        }
      ]
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}, (err, stats) => {
  if (err || stats.hasErrors()) {
  }
});

原因

vue-loader 处理过后 script 的代码会传给 esbuild-loader，但是 esbuild 无法根据 .vue 文件来绝定自己要使用哪个 loader，所以必须显式告诉 esbuild 使用 js loader.

参考

https://github.com/esbuild-kit/esbuild-loader-examples/blob/master/examples/vue-loader/webpack.config.js