client-wms-board/webpack.base.js

var path = require('path');
var webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // include: [        
                //   path.resolve(__dirname, './node_modules/pc-component-v3/dist/pc-component-v3.js'),      
                // ],
                // exclude: file => (
                //   /node_modules/.test(file) &&
                //   !/\.vue\.js/.test(file)
                // ),
            },
            {
                test: /\.css$/,
                use: (process.env.NODE_ENV === 'production') ? [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    'css-loader',
                    'postcss-loader'] : ['style-loader', 'css-loader', 'postcss-loader'],
                    // ‌‌PostCSS**的核心作用‌是转换CSS和处理CSS。它通过插件机制来处理CSS文件，支持各种转换任务，如自动添加浏览器前缀、压缩代码、使用未来CSS语法等。‌
            },
            // 处理链条（从右到左）
            /**
             * 1.postcss-loader：执行 PostCSS 插件（Tailwind + Autoprefixer）
             * 2.css-loader：解析 CSS 中的 import 和 url()
             * 3.style-loader（开发环境）：将 CSS 注入到 <style> 标签
             * 4.MiniCssExtractPlugin.loader（生产环境）：提取 CSS 到单独文件
             */
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: './client-wms-board.image/[name].[ext]?[hash]',
                },
            },
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                loader: 'file-loader',
                options: {
                    name: './font/[name].[ext]?[hash]',
                },
            },
        ],
    },
    resolve: {

        alias: {
            //   'vue$': 'vue/dist/vue.esm.js',
            '@static': path.resolve('static'),
        },
        extensions: ['*', '.js', '.vue', '.json'],
    },
    performance: {
        hints: false,
    },
  
    externals: {
        bootstrap: 'bootstrap',
        BootstrapDialog: 'BootstrapDialog',
        d3: 'd3',
        echarts: 'echarts',
        moment: 'moment',
    },
  
    plugins: [
        new VueLoaderPlugin(),
        new ESLintPlugin({
            extensions: ['js', 'vue'],
            // 自动修复。
            // 自从eslint推出--fix命令后，如果觉得eslint格式化规则已经够用的话，其实也可以不用prettier了。
            fix: true,
        }),
    ],
};