javascript - 无法使用 webpack-dev-server 获取/

Question

为什么我的浏览器中出现 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']
        }
      }}
    ]
  }
};

项目结构

Answer 1

成功构建后，将在当前不存在的 app 文件夹内创建一个文件夹 dist。

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

http://localhost:3000/app/dist/yourfile