56-DeZhouDaLuJia-MES_Manage_View/build/webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoaderConfig = require('./vue-loader.conf')
const { loader} = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    clean: true // 替代 CleanWebpackPlugin
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'vue$': 'vue/dist/vue.esm.js'
    },
    fallback: {
      "process": require.resolve("process/browser.js"),
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer"),
      "util": require.resolve("util"),
      "url": require.resolve("url/"),
      "fs": false,
      "tls": false,
      "net": false,
      "http": false,
      "https": false,
      "zlib": false
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client')
        ]
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 10kb
          }
        },
        generator: {
          filename: utils.assetsPath('img/[name].[hash:8][ext]')
        },
        exclude: [resolve('src/icons')]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        },
        generator: {
          filename: utils.assetsPath('media/[name].[hash:8][ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        },
        generator: {
          filename: utils.assetsPath('fonts/[name].[hash:8][ext]')
        }
      },
      // 添加 CSS 文件处理规则
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? loader
            : 'vue-style-loader',
          'css-loader'
        ],
        include: /node_modules/ // 专门处理 node_modules 中的 CSS
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? loader
            : 'vue-style-loader',
          'css-loader'
        ],
        exclude: /node_modules/ // 处理项目中的 CSS
      },
      // SCSS 规则
      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? loader
            : 'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 使用现代 API
              api: 'modern',
              // 或者使用兼容模式
              // api: 'legacy',
              sassOptions: {
                // 其他 Sass 选项
              }
            }
          }
        ]
      },
      {
        test: /\.sass$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? loader
            : 'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                indentedSyntax: true
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer']
    }),
    new ESLintPlugin({
      extensions: ['js', 'vue'],
      exclude: ['node_modules', 'dist', 'build', 'assets/img/api'],
      // 只检查当前修改的文件,不检查整个项目
      lintDirtyModulesOnly: true,
      threads: true, // 启用多线程,提升速度
      fix: false,
      emitWarning: true,
      emitError: false,
      failOnWarning: false,
      failOnError: false,
      // 缓存 ESLint 结果
      cache: true,
      cacheLocation: 'node_modules/.cache/eslint'
    })
  ]
}