Vue2 项目怎么整合 esbuild-loader,研究了很久还是失败

2021-01-09 08:32:36 +08:00
 Cbdy

老项目改造,不考虑 vite

核心的 webpack.config.js 差不多是这样写的,但是不知道为啥 esbuid-loader 没有把 js 转译成 es2015

有没有大佬帮忙看看

const { resolve } = require('path')
const { ESBuildPlugin } = require('esbuild-loader')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const { createTemplatePlugin } = require('./template.plugin.cjs')

const entry = {
    app: './src/app.js',
    bpp: './src/bpp.js',
}

const templatePlugins = Object.keys(entry).map(it => createTemplatePlugin({
    chunks: [it],
    filename: `${it}.html`,
}))

const config = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /node_modules/,
            }, {
                test: /\.js$/,
                use: [{
                    loader: 'esbuild-loader',
                    options: {
                        target: 'es2015'
                    }
                }],
                exclude: /node_modules/,
            }, {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{ loader: 'file-loader', options: { outputPath: 'assets' } }],
            }, {
                test: /\.(css|less)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' },
                ],
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.vue', '.js']
    },
    plugins: [
        new VueLoaderPlugin(),
        new ESBuildPlugin(),
        ...templatePlugins,
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            automaticNameDelimiter: '_',
        },
    },
    entry,
    output: {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].js',
        path: resolve(__dirname, 'dist')
    },
    mode: 'development',
}

module.exports = config


2971 次点击
所在节点    Vue.js
1 条回复
zzk1989
2021-01-09 09:19:01 +08:00
vite-for-vue2
vue-rollup-boilerplate
这些用到了 esbuid 的项目都可以考虑,esbuid 引入 element-ui 会报错,可以用 cdn 方式引入

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/743232

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX