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, }), ], };