找不到模块:错误:无法解析'webpack/hot/dev-server/'

时间:2021-03-02 07:22:05

标签: webpack webpack-dev-server webpack-5 webpack-cli

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

0 个答案:

没有答案