Webpack 4不会将生成的html，css和js保存到dist文件夹

Question

我创建了项目并尝试配置webpack，但是我不明白为什么它不将生成的文件保存到dist文件夹中。

项目结构：

• /客户
  • /动作
  • /资产
  • 其他文件夹
  • /样式
  • index.html
  • index.js
  • AppRouter.jsx
• / dist
• webpack.config.js
• package.json

我将sass包含在react组件中，并将index.html包含在客户端文件夹中。 （我将src文件夹替换为客户端）。

webpack.config.js

const path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin');


const APP_DIR = path.resolve(__dirname, 'client');

module.exports = {
    entry: path.resolve(__dirname, 'client', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './js/bundle.js',
        publicPath: './dist',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.sass']
    },
    devServer: {
        contentBase: '/dist',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: ['/node_modules/'],
                use: ['babel-loader']
            },
            {
                //'/dist/'
                test: /\.(c|sa)ss$/,
                exclude: ['/node_modules/'],
                use: [
                    {
                    loader: MiniCssExtractPlugin.loader,
                        options: {
                          hmr: true
                        },
                    },
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(jpe?g|png)$/,
                use: [{
                  loader: 'url-loader',
                  options: {
                    limit: 10000
                  }
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
                        template: path.resolve(__dirname, 'client', 'index.html'),
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ]
};

package.json

{
    "name": "stud-cit",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@editorjs/editorjs": "^2.12.4",
        "@editorjs/header": "^2.2.3",
        "@editorjs/list": "^1.3.4",
        "@material-ui/core": "^3.8.3",
        "@material-ui/icons": "^3.0.2",
        "@material-ui/styles": "^3.0.0-alpha.8",
        "ajv": "^6.6.2",
        "axios": "^0.18.0",
        "body-parser": "^1.19.0",
        "classnames": "^2.2.6",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "history": "^4.7.2",
        "material-ui": "^1.0.0-beta.47",
        "prop-types": "^15.6.2",
        "react": "next",
        "react-dom": "next",
        "react-form-validator-core": "^0.5.1",
        "react-redux": "^6.0.0",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-scripts": "^2.1.2",
        "react-vis": "^1.11.6",
        "redux": "^4.0.1",
        "redux-devtools-extension": "^2.13.7",
        "redux-saga": "^1.0.2"
    },
    "scripts": {
        "serve": "node ./public/build/app.min.js",
        "start": "webpack-dev-server --mode development --config webpack.config.js --hot",
        "lint": "./node_modules/.bin/eslint ./client/**/*.{js,jsx}",
        "lint-fix": "./node_modules/.bin/eslint ./client/**/*.{js,jsx} --fix"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.0.0-alpha.6",
        "css-loader": "^3.0.0",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-loader": "^2.1.1",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-jsx-a11y": "^6.2.0",
        "eslint-plugin-react": "^7.12.4",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.7.0",
        "node-sass": "^4.12.0",
        "react-hot-loader": "^4.11.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "url-loader": "^2.0.0",
        "webpack": "^4.34.0",
        "webpack-cli": "^3.3.3",
        "webpack-dev-server": "^3.7.1"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-syntax-dynamic-import"
        ]
    }
}

它没有出现任何生成的文件（html，css，js）。