JG-BASE-SERVICE-WEB/config/base.ts

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    output: {
        filename: 'js/[name].js',
        path: path.join(process.cwd(), '/dist/'),
        clean: true
    },
    resolve: {
        alias: {
            '@jg_widgets': path.resolve(__dirname, '../node_modules/jg_widgets/packages'),
            vue: "vue/dist/vue.esm.js",
        },

        extensions: ['.tsx', '.ts', '.js', '.vue', '.css', '.scss']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader',
                exclude: /node_modules/
            }, {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [['postcss-preset-env', { browsers: '>0.01%' }]]
                        }
                    }
                }]
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                exclude: /node_modules/,
                type: 'javascript/auto', // ! type 与 esModule处理css中url图片被生成两次，并且css导入的那次图片资源无效的问题
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false,
                            publicPath: './',
                            limit: 2048,
                            name: `image/[name].[hash].[ext]`
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                resolve: {
                    fullySpecified: false
                }
            },
            {
                test: /\.(js|ts)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        modules: false, // ! 避免转换commonjs影响tree shaking
                                        corejs: '3', // ! 自动按需注入垫片
                                        targets: '>0.25%',
                                        useBuiltIns: 'usage'
                                    }
                                ],
                                [
                                    '@babel/preset-typescript',
                                    {
                                        allExtensions: true // ! .vue文件需要
                                    }
                                ]
                            ],
                            plugins: []
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        }),
        new HtmlWebpackPlugin({
            title: 'app',
            template: path.resolve(__dirname, './template.ejs')
        })
    ]
}
// 阻止ts全局类型推导报错
export { }