webpack 4：找不到捆绑js
Posted
技术标签:
【中文标题】webpack 4：找不到捆绑js【英文标题】：webpack 4 : bundle js not found 【发布时间】：2019-01-07 21:20:58 【问题描述】：我最近升级到 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>
【问题讨论】：
你能检查一下 bundle.js 文件是否真的在 dist 文件夹中吗？ 我没有 dist 文件夹。我有 build 文件夹和在它下面生成的 bundle 文件。 【参考方案1】：在浏览了与此问题相关的所有 github 答案后，我找到了答案。我终于在我的 index.html 中找出了问题
问题主要是在 index.html 中指向 bundle js。找不到 webpack bundle.js 的原因是因为我在 index.html 中指定了错误的路径。
以下解决了我的问题。
<script src="/bundle.js"></script>
【讨论】：
太棒了！我已将这些引用设置为“./bundle.js”，其效果是具有一个 URL 段的路径，例如重新加载页面时“/sources”被正确解析，而“/sources/new”等失败。 就我而言，我只是忘了提供webpack.output.publicPath。以上是关于webpack 4：找不到捆绑js的主要内容，如果未能解决你的问题，请参考以下文章