webpack1 版本升级 webpack5 问题记录

1.背景入职新公司, 前端项目技术栈老旧,启动时间长,编译慢

技术栈: "webpack": "1.14.0", "react": "16.14.0", "antd": "4.15.0"

技术栈升级:

"webpack": "^5.74.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",

问题 1: webpack5 webpack-dev-server 端口冲突 另起端口怎么实现

```
devServer: {
    host: "0.0.0.0",
    port: "auto", // 解决当端口冲突,会自动尝试下一个端口
    hot: true, // 开启热更新，后面会讲react模块热替换具体配置
    historyApiFallback: true, // 解决history路由404问题
    static: {  // 托管静态资源
        directory: path.resolve(__dirname, "../public"),
    },
    client: {
        overlay: false, // 禁止：当出现编译错误或警告时，在浏览器中显示全屏覆盖
    },
    compress: false, // gzip压缩,开发环境不开启,提升热更新速度
},
```

问题 2: webpack5 编译警告 怎么取消全屏展示

client: {
    overlay: false, // 禁止：当出现编译错误或警告时，在浏览器中显示全屏覆盖
},

问题 3: react 热更新的编译报错的全屏报错

// 开启不刷新游览器热更新
new ReactRefreshWebpackPlugin({
    overlay: false,  // 关闭 react 热更新的编译报错的全屏报错
}),

问题 4: mini-css-extract-plugin 提取 css 文件 后 打包的文件样式不生效 解决方法 在 webpack.base.config.js 文件中添加下边的代码 同时,删除 webpack.prod.config.js 中的 mini-css-extract-plugin 配置的 loader 配置

webpack.base.config.js

module: {
    rules: [
        {
            test: /.css$/,
            use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader,"css-loader", "postcss-loader"],
        },

        {
            test: /.less$/,
            use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: {
                            mode: 'local',
                            // 以下是新的自定义本地标识名(localIdentName)的方式
                            localIdentName: '[path][name]__[local]--[hash:base64:5]',
                        }
                    }
                }, "postcss-loader", "less-loader"],
        },
        
      
    ],
},

问题 5: Multiple assets emit different content to the same filename index.html

原因: HtmlWebpackPlugin 配置 webpack.base.config.js 中的配置 与 webpack.prod.config.js 中的重复了

解决方法: 删除 webpack.prod.config.js 中的 HtmlWebpackPlugin 配置

webpack.base.config.js

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "../public", "index.html"),
        favicon: path.resolve(__dirname, "../public",'favicon.ico'),
        inject: true,
    }),
],

问题 6: ERROR in ./src/layout/ceshi.less Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read github.com/webpack-con…

原因: 在 webpack.base.config.js 中使用 mini-css-extract-plugin 区分开发还是生产模式,

webpack.base.config.js

const isDev = process.env.NODE_ENV === 'development'
// 其他配置省略
module: {
    rules: [
        {
            test: /.css$/,
            use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader,"css-loader", "postcss-loader"],
        },

        {
            test: /.less$/,
            use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: {
                            mode: 'local',
                            // 以下是新的自定义本地标识名(localIdentName)的方式
                            localIdentName: '[path][name]__[local]--[hash:base64:5]',
                        }
                    }
                }, "postcss-loader", "less-loader"],
        },
        
      
    ],
},

process.env.NODE_ENV 获取不到值,导致 启动开发服务器报错

解决办法:

 npm install cross-env -D 

在 package.json 文件中修改启动命令

package.json

"dev": "cross-env NODE_ENV=development webpack serve --open --config ./config/webpack.dev.config.js",