client-trace-v5/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'] : ['style-loader', 'css-loader']
        },
        {
          // webpack5 通过资源模块来处理图片
          test: /\.(png|jpg|gif|svg)$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
                maxSize: 10240
            }
          },
          generator: {
            filename: './asset-image/[name][ext][query]'
          }
        },
        {
          test: /\.(eot|woff|woff2|ttf)$/,
          type:"asset/resource",
          generator:{
            filename:"./asset-font/[name].[hash:6][ext]"
          }
        },
        {
          test: /\.md$/,
          use: [
              {
                  loader: "html-loader",
              },
              {
                  loader: "markdown-loader",
                  options: {
                      // Pass options to marked
                      // See https://marked.js.org/using_advanced#options
                  },
              },
          ],
        },
      ]
  },
  resolve: {

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