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 })'})
]
};