没有生成 webpack 捆绑文件，没有错误答案

【问题标题】：webpack bundle file is not being generated with no errors没有生成 webpack 捆绑文件，没有错误
【发布时间】：2018-09-09 03:31:30
【问题描述】：

我是新手，正在尝试学习 webpack 配置。我的项目使用的是webpack4，但是，设置webpack后，没有生成bundle文件，js文件和html文件都没有，也没有错误。

控制台上的输出显示“编译成功”。我该如何解决。我已经苦苦挣扎了大约一周，似乎没有任何在线资源可以满足我的需求。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;

const paths = {
    DIST: path.resolve(__dirname, 'dist'),
    SRC: path.resolve(__dirname, 'src'),
    JS: path.resolve(__dirname, 'src/js')
}

const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});

module.exports = {
    mode: 'development',
    entry: path.join(paths.JS, 'index.js'),
    output: {
        path: paths.DIST,
        filename: 'app.bundle.js'
    },

    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },

                    {
                        loader: "css-loader",
                        options:{
                            modules: true,
                            importLoaders: 1,
                            localIndentName: "[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true,
                            camelCase:true
                        }
                    }

                ]
            }
        ]
    },

    plugins: [htmlPlugin],

    devServer: {
        publicPath: paths.DIST,
        host: 'localhost',
        port: port,
        historyApiFallback: true,
        open:true,
        hot: true
    }
};

【问题讨论】：

你在使用开发服务器吗？如果是这样，webpack 开发服务器会将你的文件放在内存中，而不是你的 '/dist' 目录。
谢谢，但我该如何解决呢？

标签： reactjs npm webpack webpack-dev-server

【解决方案1】：

确保所有路径正确，没有丢失文件。

src/js/index.js
src/index.html

确保正确运行 webpack 以显示如下日志：

package.json

"scripts": {
    "start": "webpack --config webpack.config.js --bail --progress --profile"
},

并由npm start 运行，然后将显示日志。

如果你愿意，你可以使用新的 babel 版本。用这个改变你的 bable：

"dependencies": {
    "@babel/core": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",

    ...

    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
},

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

然后更新你的 webpack 规则：

 {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: [require('@babel/plugin-proposal-object-rest-spread')]
      }
    },
    exclude: /node_modules/
  },

【讨论】：