内容不是出局 webpack 服务于 /foo

我只是无法运行此服务器,我读了
https://webpack.js.org/configu ... erver
webpack-dev-server .


devServer: {
contentBase: path.join/__dirname, "dist"/,
compress: true,
port: 9000
}


示例代码看起来很简单,但我只是无法成功运行这个服务器,无论我尝试了什么,另一个文件夹,她都无法得到

内容

!!!我错过了什么?

任何帮助都非常感激。

出口:


Project is running at [url=http://0.0.0.0:8080/]http://0.0.0.0:8080/[/url]
webpack output is served from /assets/
Content not from webpack is served from ~/WebstormProjects/react_back/assets/


我的项目结构:


├── [drwxr-xr-x ] src
│   └── [-rw-r--r-- ] index.js
├── [drwxr-xr-x ] public
│   ├── [-rw-r--r-- ] index.html
│   ├── [drwxr-xr-x ] assets
│   │   └── [-rw-r--r-- ] bundle.js
│   └── [-rw-r--r-- ] favicon.ico
├── [-rw-r--r-- ] package.json
├── [-rw-r--r-- ] npm-debug.log
├── [-rw-r--r-- ] webpack.config.js


package.json


"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval"
},


webpack.config.js


module.exports = {
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/public",
publicPath: "/assets/",
filename: "assets/bundle.js",
chunkFilename: '[name].js'
},
devServer: {
contentBase: __dirname + "/assets/",
inline: true,
host: '0.0.0.0',
port: 8080,
},
module: {
loaders: [
{
test: /\./jpg|jpeg|gif|png|ico/$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["es2016", "react", "env", "stage-2"]
}
}
]
}
};


版本

:


➜ node -v
v7.6.0
➜ webpack-dev-server -v
webpack-dev-server 2.4.1
webpack 2.2.1
已邀请:

风见雨下

赞同来自:

第一个问题是您提供内容
assets/

, 但是你没有这个目录,你有
public/assets/

, 它甚至不是你想要的,因为你的
index.html

位于
public/

. 所以你真正想要的 - 安装它
contentBase


public/

:


devServer: {
contentBase: __dirname + "/public/",
inline: true,
host: '0.0.0.0',
port: 8080,
},


现在你仍然会出现问题
webpack-dev-server

不服务于正确 bundle. 它可以工作,但它是因为你有 bundle 在您的实际文件系统中,它将被使用 bundle, 哪一个
webpack-dev-server

将从记忆中服务。 这是一个原因
webpack-dev-server

如果选择了正确的路径,它仅从内存中服务。 支持 , 你打开了什么
assets/bundle.js

在你的
index.html

, 它适合这种方式,但你安装
publicPath: "/assets/"

, 所以他会看
/assets/

并为其添加文件名 /这是
assets/bundle.js

, 实际上 bundle 服务于
/assets/assets/bundle.js

.

要修复它,您可以删除选项
publicPath

/安装
publicPath: "/"

具有相同的效果/.


output: {
path: __dirname + "/public",
filename: "assets/bundle.js",
chunkFilename: '[name].js'
},


或者您可以更改输出路径
/public/assets/

, 并且文件的名称仅在
bundle.js

. 它也将使您的作品转到资产目录,这可能是您想要的任何情况。


output: {
path: __dirname + "/public/assets/",
publicPath: "/assets/",
filename: "bundle.js",
chunkFilename: '[name].js'
},


笔记:
publicPath

影响一些改变的下载者 URL 资产。

小明明

赞同来自:

这可能是一个问题 'react-scripts', 对我来说,她没有为该版本工作 3.4.1, 我发了一个版本 3.4.0, 她现在在工作。
打开文件 package.json 和编辑 "react-scripts": "3.4.0", 如果这是别的东西, OR 您可以根据您的要求尝试不同的版本。 但这些问题似乎与该版本有关 "react-scripts", 所以你需要检查一下。

詹大官人

赞同来自:

我有同样的问题,我在改变版本后决定它 react-scripts 3.4.1 在 3.4.0. 我不知道为什么!

要回复问题请先登录注册