首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法获取/ with webpack-dev-server

无法获取/ with webpack-dev-server
EN

Stack Overflow用户
提问于 2017-09-30 16:37:34
回答 2查看 4.3K关注 0票数 0

为什么我的浏览器中会有Cannot GET /?我想这是因为我的webpack-dev-server没有获取捆绑文件的路径。

devServer/server.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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']
        }
      }}
    ]
  }
};

项目结构

EN

回答 2

Stack Overflow用户

发布于 2017-09-30 16:43:59

在成功构建时,将在app文件夹中创建一个文件夹dist,该文件夹当前不在那里。

创建文件夹后,您可以直接点击文件路径进行尝试

代码语言:javascript
复制
http://localhost:3000/app/dist/yourfile
票数 1
EN

Stack Overflow用户

发布于 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文件:

代码语言:javascript
复制
<!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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46501079

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档