未找到 webpack bundle.js - 404 错误答案

【问题标题】：webpack bundle.js not found - 404 error未找到 webpack bundle.js - 404 错误
【发布时间】：2018-03-27 14:46:34
【问题描述】：

我正在尝试学习 Webpack 配置，但我的控制台中不断出现错误。好像没有找到我的 webpack app.bundle.js。

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

下面是webpack配置的代码和错误

// 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

【问题讨论】：

你正在将你的 JS 输出到dist 目录
尝试在输出中添加publicPath：output: { path: paths.DIST, filename: 'app.bundle.js', publicPath: '/' }
webpack.js.org/configuration/output/#output-publicpath
@Max Baldwin，我不明白你指的是什么。
您的文件路径错误。你失败的路径是http://localhost:3000/js/app.bundle.js。您没有输出到 js 目录。您正在输出到dist 目录。

标签： javascript reactjs npm webpack

【解决方案1】：

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

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

contentBase 和 publicPath 的参考链接。

【讨论】：

【解决方案2】：

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

npx webpack

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

【讨论】：