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

Question

我有这样的结构：
https://i.stack.imgur.com/oj2KH.png\这个webpack配置了：
base:

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: `` }
]
})
],
module: {
rules: [
{
test: /.js$/,
use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }
},
{
test: /.((c|sa|sc)ss)$/i,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: true } },
PostcssLoaderConfig, { loader: 'sass-loader', options: { sourceMap: true } } ]
},
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
} 
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
};

dev:

const webpack = require('webpack');
const webpackServer = require('webpack-dev-server');
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
devServer: {
contentBase: baseWebpackConfig.externals.paths.dist,
port: 8081,
overlay: true
},
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map'
})
]
})
module.exports = new Promise((resolve, reject) => {
resolve(devWebpackConfig)
})

构建：

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const buildWebpackConfig = merge(baseWebpackConfig, {
mode: 'production',
plugins: []
})
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig)
})

我对dev-config没有任何问题，它运行良好，但构建版本看起来像：
https://i.stack.imgur.com/lxYbr.png
HTML:
https://i.stack.imgur.com/IkFXd.png
控制台：
https://i.stack.imgur.com/sICyX.png
此外，我注意到SCSS中使用的一些文件在dist根目录中，尽管那里不需要它们(因为复制了assets文件夹(
我该怎么做才能使构建正常工作？

Answer 1

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