我该怎么做才能使构建正常工作？

Question

基础：

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { VueLoaderPlugin } = require('vue-loader');

 

const PATHS = {

    src: path.join(__dirname, '../src'),

    dist: path.join(__dirname, '../dist'),

    assets: 'assets/'

}

 

const PostcssLoaderConfig = {

    loader: 'postcss-loader',

    options: { sourceMap: true, postcssOptions: { config: `${PATHS.src}/assets/js/configs/postcss.config.js` } }

}

 

module.exports = {

    externals: {

        paths: PATHS,

        plugins: {

            miniCssExtract: MiniCssExtractPlugin

        },

        configs: {

            postCssLoader: PostcssLoaderConfig,

        }

    },

    entry: {

        app: PATHS.src

    },

    output: {

        path: PATHS.dist,

        filename: `${PATHS.assets}js/[name].js`,

        publicPath: '/'

    },

    optimization: {

        splitChunks: {

            cacheGroups: {

                vendor: {

                    name: 'vendors',

                    test: /node_modules/,

                    chunks: 'all',

                    enforce: true

                }

            }

        }

    },

    plugins: [

        new VueLoaderPlugin(),

        new MiniCssExtractPlugin({

            filename: `${PATHS.assets}css/[name].css`

        }),

        new HtmlWebpackPlugin({

            hash: false,

            template: `${PATHS.src}/index.html`,

            filename: './index.html'

        }),

        new CopyWebpackPlugin({

            patterns: [

                { from: `${PATHS.src}/assets/img/`, to: `${PATHS.assets}img` },

                { from: `${PATHS.src}/assets/fonts/`, to: `${PATHS.assets}fonts` },

                { from: `${PATHS.src}/static/`, to: `` }

            ]

        })

    ],

Answer 1

配置是为 Webpack 4 创建的，但安装了 Webpack 5。