webpack 版本 5 上的错误 当我将 webpack 从 4.41.5 更新到 5.24.2 并将我的 webpack-cli 从 3.3.10 更新到 4.5 时.0 其抛出的 模块未找到错误无法解析 'webpack/hot/dev-server/',并且它在 webpack 版本 4 及以下版本上运行良好我已附加了 webpack配置代码 当我将 webpack 从 4.41.5 更新到 5.24.2 并将我的 webpack-cli 从 3.3.10 更新到 4.5 时.0 其抛出的 模块未找到错误无法解析 'webpack/hot/dev-server/',并且它在 webpack 版本 4 及以下版本上运行良好我已附加了 webpack配置代码
const webpack = require('webpack')
const WriteFilePlugin = require('write-file-webpack-plugin')
const PATHS = require('./path')
const postCssOptions = {
sourceMap: 'inline',
ident: 'postcss',
pack: 'cleaner',
plugins: () => [
require('postcss-preset-env')({
autoprefixer: {
overrideBrowserslist: ['last 5 versions', 'safari >= 7', 'IE >= 11', '> 1% in IN']
},
stage: 3
})
]
}
module.exports = {
target: 'web',
mode: 'development',
entry: {
common: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8081/',
'webpack/hot/dev-server/'
],
app: PATHS.CLIENT,
},
devtool: 'eval-source-map',
output: {
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: '/static/',
},
devServer: {
contentBase: PATHS.BUILD,
hot: true,
port: 8081,
stats: 'minimal',
compress: true,
disableHostCheck: true,
clientLogLevel: 'error',
writeToDisk: true,
after: (app, server) => {
console.log('after')
},
headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': 'true' },
},
resolve: {
extensions: ['.js', '.less', '.json', '.svg', 'index.js'],
modules: [
'node_modules',
PATHS.CLIENT,
PATHS.SERVER,
PATHS.APP,
PATHS.STYLES,
PATHS.SVG,
PATHS.HTMLS,
PATHS.ROUTES,
],
alias: {
app$: PATHS.APP,
client$: PATHS.CLIENT,
server$: PATHS.SERVER,
styles$: PATHS.STYLES,
svg$: PATHS.SVG,
htmls$: PATHS.HTMLS,
routes$: PATHS.ROUTES
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
include: [PATHS.SRC],
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
},
{
loader: require.resolve('postcss-loader'),
options: postCssOptions
},
{
loader: 'less-loader',
options: {
lint: true,
noIeCompat: true,
sourceMap: true,
strictImports: true,
strictMath: true,
strictUnits: true
}
}
],
exclude: ['/node_modules/'],
include: PATHS.STYLES,
},
{
test: /\.proto$/,
exclude: ['/node_modules/'],
use: [
{
loader: require.resolve('grpc-loader'),
options: {
static: false,
},
},
],
},
],
},
optimization: {
moduleIds: 'named',
},
plugins: [
new webpack.HotModuleReplacementPlugin({ quiet: true }),
//new webpack.NamedModulesPlugin(),
new WriteFilePlugin(),
new webpack.DefinePlugin({
_PROD_: JSON.stringify(false),
_DEV_: JSON.stringify(true),
_CLIENT_: JSON.stringify(true),
_SERVER_: JSON.stringify(false),
'process.env': {
NODE_ENV: JSON.stringify('development'),
npm_lifecycle_event: JSON.stringify(process.env.npm_lifecycle_event)
}
})
]
}