webpack 4:未找到捆绑包js [英] webpack 4 : bundle js not found
问题描述
我最近升级到webpack4.该页面已成功加载，只要发生更改，它就会使用webpack-dev-server自动刷新页面.它确实很好，但在控制台中显示以下错误
I recently upgraded to webpack 4. The page is getting loaded successfully and whenever changes happened it refreshes the page automatically using webpack-dev-server. It does very nice but in the console it shows below error
GET http://localhost:8090/build/bundle.js 404(不找到)
有时，URL中一旦有ID，就会将ID附加到如下所示的捆绑js URL上
And some times when ever there is id in the URL it appends the id to bundle js url like below
我尝试了很多方法来使用Stack Overflow答案和GitHub解决方案，但没有一个适合我.以下是模块详细信息
I tried many ways with Stack Overflow answers and GitHub solutions but none of them working for me. Below are module details
"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": "^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放在根目录中
My index.html is placed in root directory
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>
推荐答案
在浏览了所有与此问题相关的github答案后，我找到了答案.最后，我终于在index.html
I found answer after going through all the github answers related to this issue. I finally end up in figuring out the issue in in my index.html
问题主要是指向index.html中的bundle js.找不到webpack bundle.js的原因，因为我在index.html中指定了错误的路径.
The problem mostly with pointing bundle js in index.html. The reason webpack bundle.js not found because I specified wrong path in my index.html.
下面的一个解决了我的问题.
The below one resolved my issue.
<script src="/bundle.js"></script>
这篇关于webpack 4:未找到捆绑包js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
