webpack 4：找不到捆绑js-Java 学习之路

我最近升级到webpack 4.页面成功加载，每当发生更改时，它都会使用webpack-dev-server自动刷新页面 . 它确实非常好，但在控制台中它显示错误

GET http：// localhost：8090 / build / bundle.js 404（未找到）

有时候，当URL中有id时，它会将id附加到js url，如下所示

http：// localhost：8090/16 / build / bundle.js

我尝试了Stack Overflow答案和GitHub解决方案的很多方法，但没有一个能为我工作 . 以下是模块详细信息

“webpack”：“^ 4.15.0”，“webpack-cli”：“^ 3.0.8”，“webpack-dev-server”：“^ 3.1.4”，“babel-core”：“^ 6.26 . 3“，”babel-loader“：”^ 7.1.5“，”babel-plugin-transform-class-properties“：”^ 6.24.1“，”babel-plugin-transform-object-rest-spread“：” ^ 6.26.0“，”babel-polyfill“：”^ 6.26.0“，”babel-preset-env“：”^ 1.7.0“，”babel-preset-react“：”^ 6.24.1“

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    target: "web",
    entry: [
        "whatwg-fetch",
        'webpack-dev-server/client?http://localhost:8090',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        "./src/index.js"
        ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/"
        //make sure port 8090 is used when launching webpack-dev-server
    },
    plugins: [new HtmlWebpackPlugin({
        template: "index.html"
    }),
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.jsx$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }),
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
    ],
    module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader"  
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        modules: [
            path.resolve("./src"),
            path.resolve("./node_modules")
        ],
        extensions: [".js", ".jsx"]
    },
    devServer: {
        watchOptions: {
        // Needed for Windows Subsystem for Linux dev environment:
            poll: true
        },
        contentBase: "/build"
    },
    devtool: "cheap-module-eval-source-map",
    node: {
        child_process : "empty",
        fs: "empty"
    }
};

我的index.html位于根目录中

index.html

<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div id="App">
        <!-- this is where the root react component will get rendered -->
    </div>
    <script type="text/javascript" src="./build/bundle.js"></script></body>

</html>

1 回答

0
在完成与此问题相关的所有github答案后，我找到了答案 . 我终于在我的index.html中搞清楚了这个问题

问题主要是在index.html中指向bundle js . 之所以找不到webpack bundle.js，是因为我在index.html中指定了错误的路径 .

下面的一个解决了我的问题 .
```
<script src="/bundle.js"></script>
```
回复于 2024-05-03T04:44:45+08:00

webpack 4：找不到捆绑js

1 回答

相关问题