首页 文章

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

提问于
浏览
0

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

但是,当我访问http://localhost:8080/webpack-dev-server/时,似乎没有任何作用;可以't type into the input components, can' t滚动等

这几乎就像页面被冻结了 . 这刚刚开始在新的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

1 回答

  • 0

    尝试更改你的 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'
    },
    

相关问题