Webpack-Dev-Server抛出WDS断开连接

时间:2018-05-22 16:11:25

标签: webpack webpack-dev-server

webpack dev服务器记录“[WDS]已断开连接!”每次网站加载。这让我感到困惑,因为一切似乎都有效。服务器以监视模式(“--watch-poll”)运行,并立即应用更改。对于未来,我想知道“[WDS]是否已断开连接!”可能导致更多错误(例如,当我实施热模块替换时)以及如何解决此问题。

编辑:

const webpack = require('webpack');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const { resolve, join } = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

var local = null;
try {
  local = require('./local');
} catch (err) {
  console.error(err.message);
}

var forkTsCheckerConfig =
{
  tsconfig: resolve('./tsconfig.json')
}

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    modules: [join(__dirname, 'src'), 'node_modules']
  },

  context: resolve(__dirname, 'src'),

  entry: './Main.tsx',
  output: {
    filename: 'bundle.js',
    //filename: 'bundle.js',
    //chunkFilename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '' // necessary for HMR to know where to load the hot update chunks
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react', ['es2015', { modules: false, loose: true }]],
              plugins: ['transform-runtime', 'lodash']
            }
          },
          { loader: 'cache-loader' },
          { loader: 'thread-loader', options: { workers: require('os').cpus().length -1 } },
          { loader: 'ts-loader', options: { transpileOnly: true, happyPackMode: true } }
        ]
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ],
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    noInfo: true,
    host: local ? local.hostname : '127.0.0.1',
    port: local ? local.port : 3000,
    publicPath: '/'
  },
  devtool: 'cheap-module-source-map',
  plugins:
  [
    new ForkTsCheckerWebpackPlugin(forkTsCheckerConfig),
    new CompressionPlugin({ test: [/\.tsx/, /\.ts/, /\.js/], minRatio: 0.1 }),
    new webpack.DefinePlugin({ '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'})
  ]
};

0 个答案:

没有答案