webpack - 如何构建需要不同 webpack 版本的不同项目？

Question

我新安装了 ubuntu 18.04，上面安装了 apache。

我不得不下载其他同事/自由职业者开发的几个 ReactJS 项目。似乎每个项目都需要我使用 webpack 命令构建它。但是，每个项目都需要不同版本的 webpack。

经过多次努力，我能够在使用 webpack 3.10.0 时构建我的项目之一。这是在我的 ubuntu 上全局安装的版本。

所以我的问题是人们通常如何在需要不同版本的 webpack 的同时在同一台机器上构建不同的 ReactJS 项目？我是否需要卸载并重新安装我想要使用的版本的 webpack？

---

self 注意

为了构建项目 1，我这样做:

sudo npm uninstall -g webpack
sudo npm install -g webpack@3.10.0
webpack

然后为了构建项目 2，我这样做:

sudo npm uninstall -g webpack
sudo npm install -g webpack@2.1.0
webpack

等...

Answer 1

是的，这是可能的!

但是，它要求您在 package.json 中绕过 Webpack 的 cli 命令以获取共享节点脚本。

1) 您需要运行最新版本的 NPM 才能使用它的新包 npm:XXX@XXX 别名功能:

Package.json devDependencies:

"devDependencies": {
  "webpack-cli": "^3.3.8",
  "webpack4.39.3": "npm:webpack@4.39.3",
  "webpack4.39.2": "npm:webpack@4.39.2"
}

现在你应该安装了两个版本的 Webpack:

• node_modules/webpack4.39.3/
• node_modules/webpack4.39.2/

我建议您删除 node_modules 并使用双版本 Webpack 别名重新安装，这样就不会找到挥之不去的/node_modules/webpack/文件夹。

2) 接下来，更新 package.json 脚本以绕过 Webpack 命令，而是运行共享配置节点脚本。这是因为 Webpack 还不允许为内部 CLI 命令设置别名。

Package.json 脚本:

"scripts": {
  "build": "npm run newer && npm run older",
  "newer": "node ./wp.config.js webpack@4.39.3",
  "older": "node ./wp.config.js webpack@4.39.2"
}

3) 现在在 wp.config.js Node 脚本中我们简单地:

• 导入我们需要的所有版本的 Webpack
• 制作可以在两个 Webpack 版本之间共享的配置对象
• 我们要使用 process.argv 的版本条件
• 直接使用配置对象运行想要的Webpack版本的方法

wp.config.js 共享配置文件

const path = require('path');
const webpack4_39_3 = require('./node_modules/webpack4.39.3/lib/webpack.js');
const webpack4_39_2 = require('./node_modules/webpack4.39.2/lib/webpack.js');
let webpack;

// make a shared configuration for webpack
const config = {
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    path: path.resolve(__dirname, './dist')
  },
  mode: 'production',
  module: {
    rules: []
  },
  optimization: {
    minimize: false
  },
  plugins: []
};

// condition for which webpack version to use
// bonus, setting config object's 'output.filename' based on condition
if (process.argv.indexOf('webpack@4.39.3') !== -1) {
  webpack = webpack4_39_3;
  config.output.filename = './main@4.39.3.js';
}

if (process.argv.indexOf('webpack@4.39.2') !== -1) {
  webpack = webpack4_39_2;
  config.output.filename = './main@4.39.2.js';
}

// Run webpack from node
webpack(config, (err, stats) => { // Stats Object
  if (err || stats.hasErrors()) {
    // Handle errors here
  }
  // Done processing
});

在共享或独特的来源/配置上工作，它们都可以在多个级别进行调节。