webpack4升级webpack5 问题总结

1.升级包和删除包（npm-check-updates可以把所有包升级）

2.plugins及一些依赖使用方式的改变

• 项目webpack-dev-server升到了4版本用来配套webpack5，所以npm run dev的命令需要相改为webpack serve启动
• 需要再plugins里面增加VueLoaderPlugin（vue-loader）
• extract-text-webpack-plugin和optimize-css-assets-webpack-plugin已经过时了需要由mini-css-extract-plugin和css-minimizer-webpack-plugin来代替
• webpack5自带了资源解析，所以不需要什么url-loader,file-loader之类的，直接用assets就可以解析
• 调整copyWebpackPlugin（copy-webpack-plugin）使用方法
• webpack-merge要解构出来，const { merge } = require('webpack-merge')
• NamedModulesPlugin已过时，由optimization的moduleIds进行替换
• devServer改动很多可以参考以上文章链接
• UglifyJsPlugin已经过时，可以直接使用webpack5开箱提供的TerserPlugin
• 代码拆分webpack.optimize.CommonsChunkPlugin已经过时现在使用webpack5提供的optimization.splitChunks属性来实现功能来实现
• 由于vue-loader升级了，所以之前css如果使用/deep/有可能出错。我是在根节点使用/deep/然后换到::v-deep就正常了。如果有类似问题，可以相应调整。

3.调整问题处理

• vue-style-loader使用style-loader替代
• MiniCssExtractPlugin我调整了一下css生成位置和名字

new MiniCssExtractPlugin({ 
    filename: utils.assetsPath('css/[name].css'), 
    chunkFilename: utils.assetsPath('css/[id].[contenthash].css') 
})

• splitChunks调整。我为了将所有css合并为一个css所以调整了一下cacheGroups

splitChunks: {
  ···
  cacheGroups: {
    vendors: {
      name: 'vendors',
      test({ resource }) {
        return /[\/]node_modules[\/]/.test(resource);
      },
      priority: -10
    },
    styles: {
      name: "styles",
      chunks: "all",
      type: "css/mini-extract",
      enforce: true,
      priority: 10,
    }
  }
}

• HashedModuleIdsPlugin 用法改变

//webpack4用法
plugins:[
    new webpack.HashedModuleIdsPlugin(),
]

//webpack5用法
plugins:[
    new webpack.ids.HashedModuleIdsPlugin(),
]

• output中 jsonpFunction改变

//webpack4
output:{
    jsonpFunction: `webpackJsonp_/${projectPrefix}`,
}
//webpack5
output:{
    chunkLoadingGlobal: `webpackJsonp_/${projectPrefix}`,
}

• vue-laoder和样式laoder都加了 还报下面的错误
  原因：可能是使用了merge baseWebpackConfig和config这两个配置重复使用了样式loader

 module.exports = merge(baseWebpackConfig, config)

• devServer的改变

//webpack4
devServer：{
    hot: true,
    open: true,
    port: 9999,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
    },
    before: (app) => {
        app.get('/', (req, res) => {
            res.send(`http://${req.headers.host}/${projectPrefix}/main.js`)
        })
    },
    publicPath: `/${projectPrefix}/`,//在webpack5中被干掉  没设置从output里面取publicPath
    // 对webpack编译时只提示错误信息 屏蔽warning 等
    stats: 'errors-only',
    overlay: {
        errors: true
    },
}
//webpack5
devServer：{
    hot: true,
    open: true,
    port: 9999,
    client: {
        logging:'none',
        //不设置webSocketURL ws连接不上 热更新会失败
        webSocketURL: 'ws://127.0.0.1:9999/ws'//端口号和port保持一致 ws代理本地
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
    },
    onBeforeSetupMiddleware: (devServer) => {
        devServer.app.get('/', (req, res, next) => {
            res.send(`http://${req.headers.host}/${projectPrefix}/main.js`)
        })
    }
}