一般在打包文件或者在生产环境基本配置的时候老是报错不知道什么原因，可能是以下问题（我报错经常的几个原因）
一、关键字没有写对，比如【module写成modules】后者【resolve写成resolver】或者【plugins写成Plugins】等等
二、某个图片或者文件路径写错了，文件名写错了
三、某个文件引入了未调用
四、你写的webpack语法过时了，无法显示
五、没有安装一些基础的插件，这个你可以查看这几个博文
一
二
三
学完gulp会发现webpack简单一点
总之：不要慌，先检查一下自己经常容易写错的那几个单词的拼写，一般都是看视频教学，然后出不来，这不是什么大问题，就是基本的东西写错了

可以参考我下面的写法

我的目录结构

我的webpack.config.js

// css处理引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    // 输出文件的绝对路径
const { resolve } = require('path')
    // css兼容性处理
const PostcssPresetEnv = require('postcss-preset-env')
    // css压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    // html文件处理
const HtmlWebpackPlugin = require('html-webpack-plugin')
    // 提取css兼容性处理的代码为公共代码
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    //修改loader的默认设置
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    PostcssPresetEnv()
                ]
            }
        }
    }
]

module.exports = {
    // 入口文件
    entry: './src/js/index.js',
    // 文件输出
    output: {
        // 名称
        filename: 'js/built.js',
        // 地址
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // css文件处理
            {
                test: /\.css$/,
                use: [...commonCssLoader]
            },
            // less文件处理
            {
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader']
            },
            // js兼容性处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: {
                                        //core-js的版本
                                        version: 3
                                    },
                                    //需要兼容的浏览器
                                    targets: {
                                        chrome: '60',
                                        firefox: '60',
                                        ie: '9',
                                        safari: '10',
                                        edge: '17'
                                    }
                                }
                            ]
                        ]
                    }
                }
            },
            //处理图片资源
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
                    // 图片会大于8kb，会被base64处理  减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢）
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'img',
                    esModule: false
                },
                type: 'javascript/auto'
            },
            // html中img图片的处理
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            // 打包其他资源(排除js/css/html)
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media', //指定这些文件打包后的目录
                    publicPath: './font',
                    name: '[name][hash:8].[ext]'
                },
                type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        // html文件
        new HtmlWebpackPlugin({
            template: './src/pages/index.html',
            // html压缩
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        // css文件使用
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin()
    ],
    mode: 'production'
}

js代码

import '../css/index1.css'
import '../css/index2.css'

const add = (x, y) => {
    return x + y;
}
console.log(add(2, 3));

new Promise(function(resolve) {
    resolve(1)
}).then(function(res) {
    console.log(res, 'promise')
})

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

css代码

.box1 {
    width: 200px;
    height: 200px;
    background-color: #ff8500;
    display: flex;
    backface-visibility: hidden;
}

.box2 {
    width: 200px;
    height: 200px;
    background: url(../img/0.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

对照一下，希望可以解决你的问题