Javascript 找不到webpack bundle.js-404错误

我试图学习网页包配置，但我的控制台中不断出现错误。似乎找不到我的网页包app.bundle.js

页面加载并显示我的html文件的内容，但不在app.bundle.js或my dist目录中的html文件中，直到我运行mpm build

下面是网页包配置的代码和错误

// import node.js native path module
const path  = require('path');
let webpack = require('webpack');

//require HtmlWebPackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const port = process.env.PORT || 3000;

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

console.log(paths.DIST);

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

//set starting point for server
devServer: {
    contentBase: paths.SRC,
    host:'localhost',
    port: port,
    historyApiFallback: true,
    open: true,
    hot:true
},

//set webpack to use plugins
plugins: [
    new HtmlWebpackPlugin({
        template: path.join(paths.SRC, 'index.html'),
    }),
    new ExtractTextPlugin('style.bundle.css'),
    new webpack.HotModuleReplacementPlugin()
],

//configure loaders
module: {
    rules: [

        //setup babel loader
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: [
                'babel-loader',
            ],
        },

        //setup css loader
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader',
            }),
        },

        {
            test: /\.(png|jpg|gif)$/,
            use: [
              'file-loader',
            ],
          },
    ],
},

//enable JS files without adding their extensions
resolve: {
    extensions: ['.js', '.jsx'],
},

};

以下是浏览器控制台上的错误

Loading failed for the <script> with source “http://localhost:3000/js/app.bundle.js”

Source map error: request failed with status 404 Resource URL: http://localhost:3000/app.bundle.js Source Map URL: sockjs.js.map

为具有源的加载失败”http://localhost:3000/js/app.bundle.js”
源映射错误：请求失败，状态为404资源URL:http://localhost:3000/app.bundle.js 源地图URL:sockjs.js.Map

这篇文章很老了，但希望这对未来的人有所帮助，因为我刚刚解决了一个类似的问题，下面是：

确保服务器根路径和输出路径对生成404错误的文件有意义。 具体来说，由“contentBase:path.SRC”设置的服务器根路径指向SRC文件夹，但JS文件输出到path.DIST。当浏览器试图访问这些文件时，它使用的URL指向错误的位置。通过将contentbase更改为DIST，或添加将覆盖contentbase的

publicPath:paths.DIST，

进行修复

---

链接到和的引用。

相同的错误发生在我身上，因为我没有运行Webpack

npx webpack

---

在与Webpack配置脚本相同的目录下运行它。

您正在将JS输出到

dist

目录尝试在输出中添加

publicPath

：

output:{path:path.dist，filename:'app.bundle.JS'，publicPath:'/'}

@Max Baldwin，我不明白你指的是什么。你的文件路径是错误的。您的失败路径是

http://localhost:3000/js/app.bundle.js

。您没有输出到

js

目录。您正在输出到

dist

目录。