Question

当我访问http://localhost:8080时，一切都按预期工作，包括热重新加载。

但是，当我访问http://localhost:8080/webpack-dev-server/时，似乎没有任何作用;无法输入输入组件，无法滚动等。

它几乎就像页面被冻结了一样。这刚刚开始在新的npm安装后发生。以前不是问题。

还有其他人遇到过这种情况吗？

这是我的webpack.config.js：

const webpack = require('webpack');
const path = require('path');

const PATHS = {
  app: './src/index.js',
  html: './src/index.html',
  dist: path.join(__dirname, 'dist')
};

module.exports = {
  entry: {
    javascript: PATHS.app,
    html: PATHS.html
  },
  output: {
    path: PATHS.dist,
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: PATHS.dist
  },
  eslint: {
    emitWarning: true
  },
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loaders: ["eslint-loader"],
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      },
      {
        test: /\.(js|jsx)/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

这是我的文件布局：

-dist
-node_modules
-src
 - components
 --index.js
 --index.html
--webpack.config.js

Answer 1

尝试更改public path，如下所示

module.exports = {
 entry: {
  javascript: PATHS.app,
  html: PATHS.html
 'webpack/hot/dev-server', // For hot style updates
 // The script refreshing the browser on none hot updates
 'webpack-dev-server/client?http://localhost:8080',

},
output: {
  path: PATHS.dist,
  publicPath: '/webpack-dev-server/',
  filename: 'bundle.js'
},

React + Webpack Dev Server：访问http：// localhost：8080 / webpack-dev-server /时，页面不是交互式的

1 个答案: