为什么我的浏览器中会有Cannot GET /?我想这是因为我的webpack-dev-server没有获取捆绑文件的路径。
devServer/server.js
import config from '../../webpack.config';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import open from 'open';
// template! https://github.com/webpack/webpack-dev-server/blob/master/examples/node-api-simple/server.js
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
contentBase: '../dist/',
stats: {
colors: true
}
});
server.listen(3000, '127.0.0.1' ,err => {
if (err) {
console.log(err);
} else {
console.log('Dev Server listening on port 3000!\n');
open("http://localhost:3000");
}
});webpack.config.js
import webpack from "webpack";
export default {
entry: [
"./app/index"
],
devtool: "inline-source-map",
output: {
path: __dirname + "/app/dist/", // Note: Physical files are only output by the production build task `npm run build`.
publicPath: "/",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
module: {
rules: [
{ test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}}
]
}
};项目结构

发布于 2017-09-30 16:43:59
在成功构建时,将在app文件夹中创建一个文件夹dist,该文件夹当前不在那里。
创建文件夹后,您可以直接点击文件路径进行尝试
http://localhost:3000/app/dist/yourfile发布于 2017-09-30 19:50:44
您可以通过localhost:3000访问您的页面
当您访问此路径时,webpack开发服务器将搜索要提供的index.html文件(就像任何其他When服务器一样)。它找不到index.html文件,因为您没有index.html文件。通过属性contentBase: '../dist/',定义的静态目录提供index.html文件。但是我看到您没有名为dist的目录,并且在此目录中没有index.html。
您的脚本是从公共路径提供的,即配置中的/,因此必须在index.html中引用它
解决方案:
创建dist目录,并在其中放置一个包含以下内容的index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="/bundle.js"></script>
</body>
</html>欲了解更多信息,请点击此处:https://webpack.github.io/docs/webpack-dev-server.html
https://stackoverflow.com/questions/46501079
复制相似问题