pc-component-v5/webpack.base.js

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        // 使用babel-loader处理js文件，会将es5以上的语法进行转义(无法转义es6 API)
        test: /\.js$/,    // 处理后缀名为js的文件
        loader: 'babel-loader',     // 使用babel-loader进行处理
        exclude: /node_modules/,    //排除node_modules下的文件
        include: [path.resolve(__dirname, 'packages'), path.resolve(__dirname, 'examples')],
        // options: {
        //   presets: ["@babel/env"]
        // }
      },
      {
        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: '[name].[contenthash][ext][query]',
        },
      },
      {
        test: /\.(eot|woff|woff2|ttf)$/,
        type: 'asset/resource',
        generator: {
          filename: '[name].[contenthash][ext]?[hash]',
        },
      },
    ],
  },

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'packages'),
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },

  performance: {
    hints: false,
  },
  
  // 不把第三方库打包到bundle中
  externals: {
    jQuery: 'window.$',
    jquery: 'window.$',
    $: 'window.$',
    bootstrap: 'bootstrap',
    dayjs: 'dayjs',
  },
  
  plugins: [
    new VueLoaderPlugin(),
    new ESLintPlugin({
      extensions: ['js', 'vue'],
      // 自动修复。
      // 自从eslint推出--fix命令后，如果觉得eslint格式化规则已经够用的话，其实也可以不用prettier了。
      fix: true,
    }),
  ],
};