如何为webpack 4安装适配版本的loader与插件

• 利用npm命令直接查询包的peer依赖适配范围
  所有webpack生态的loader、插件都会在package.json的peerDependencies字段声明兼容的webpack版本，不需要翻CHANGELOG，直接用npm命令就能查：
  • 查询某包最新版的webpack兼容要求：npm view <包名> peerDependencies.webpack
    示例：执行npm view css-loader peerDependencies.webpack，如果返回^5.0.0就说明最新版仅支持webpack5，需要降低版本查询
  • 查询指定大版本的兼容要求：npm view css-loader@6 peerDependencies.webpack，如果返回^4.27.0 || ^5.0.0就说明该大版本兼容webpack4，直接安装该大版本的最新版即可：npm install css-loader@6 -D
• 利用包的dist-tag快速安装适配版本
  大部分维护成熟的webpack生态包，都会给兼容旧版本webpack的版本打上专门的标签，常见的标签为webpack-4，直接安装对应标签的版本即可：
  命令示例：npm install css-loader@webpack-4 -D，npm会自动拉取适配webpack4的最新可用版本，无需手动筛选版本号。
• 项目层面加依赖限制，自动拦截不兼容版本
  在项目的package.json中新增peerDependencies声明，明确项目的webpack版本要求：

  {
    "peerDependencies": {
      "webpack": "^4.46.0"
    }
  }
  

  使用npm v7及以上版本安装依赖时，如果待安装的loader/插件不兼容webpack4，会直接抛出peer依赖冲突报错，无需手动校验版本兼容性。
• 常用官方loader的版本对应规则（可直接复用）
  webpack官方维护的loader版本和webpack版本有固定的对应规律，常用兼容webpack4的最高大版本如下：
  • babel-loader: ^8.3.0
  • css-loader: ^6.8.1
  • style-loader: ^3.3.3
  • less-loader: ^10.2.0
  • sass-loader: ^10.4.1
  • postcss-loader: ^4.3.0
  • file-loader: ^6.2.0
  • url-loader: ^4.1.1
    直接安装上述大版本的最新版即可稳定适配webpack4。

内容的提问来源于stack exchange，提问作者1Cr18Ni9