最近在vue2.7.x的项目中使用了esbuild-loader进行开发提速,如何在webpack中使用 esbuild-loader,可以参考以下文章。 浅谈esbuild-loader的原理
但是,如果vue2.7.x中写了jsx代码,那么以上配置就会出问题,需要用以下方法来解决。
注意vue版本需要为2.7.x。
首先 安装包 vue2-jsx-esbuild
npm i vue2-jsx-esbuild -D
然后在webpack的rules中改写以下:
...
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'esbuild-loader',
options: {
loader: 'jsx',
jsxFactory: 'vue2JsxEsbuild',
target: 'es2015'
},
}
}
]
}
...
在webapck的plugins中添加如下代码
plugins: [
new webpack.ProvidePlugin({
vue2JsxEsbuild: ["vue2-jsx-esbuild", "default"]
})
]