Question

我正在尝试将webpack-dev-server添加到我的React应用中，但是当我打开localhost：8080并查看控制台时，js/bundle.js的请求返回了404错误。

这是我的webpack配置：

const webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: "./src/app/js/index.jsx",
  output: {
    path: `${__dirname}dist/app/js`,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          // {
          //   loader: "react-hot-loader"
          // },
          {
            loader: "babel-loader",
            query: {
              presets: ["react", "es2015"],
              plugins: ["transform-class-properties"]
            }
          }
        ]
      },
    ]
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    hot: true,
    contentBase: `${__dirname}/dist/app/`,
    publicPath: `${__dirname}/dist/app/js/`
  }
};

这是dist / app / index.html：

<!DOCTYPE html>
<html>
  <body>
    <div id="app-container"></div>
    <script src="js/bundle.js"></script>
  </body>
</html>

控制台输出：

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /private/var/www/mysite.com/dist/app/back/js/
ℹ ｢wds｣: Content not from webpack is served from /private/var/www/mysite.com/dist/app/

查看js/没有bundle.js，但我理解这是正确的，因为webpack-dev-server仅在内存中创建文件。

为什么我会得到404 ...我错过了什么？谢谢。

webpack-dev-server没有渲染

0 个答案: