V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Cbdy
V2EX  ›  Vue.js

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

  •  
  •   Cbdy · 2021-01-09 08:32:36 +08:00 · 2973 次点击
    这是一个创建于 1421 天前的主题,其中的信息可能已经有所发展或是发生改变。

    老项目改造,不考虑 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
    
    
    
    1 条回复    2021-01-09 09:19:01 +08:00
    zzk1989
        1
    zzk1989  
       2021-01-09 09:19:01 +08:00
    vite-for-vue2
    vue-rollup-boilerplate
    这些用到了 esbuid 的项目都可以考虑,esbuid 引入 element-ui 会报错,可以用 cdn 方式引入
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1858 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:23 · PVG 00:23 · LAX 08:23 · JFK 11:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.