妙用 webpack4.x 配置一次，多项目畅行无阻

在上一篇文章中，我们已经了解了 webpack4.x 的基本使用。今天，我们将继续深入学习 webpack4.x，探讨如何通过一次配置，实现多个项目的运行，并在不同的项目中引用公共代码，实现代码共享。

首先，我们需要安装 commander 库，这是一个帮助我们解析命令行参数的库。我们可以使用以下命令安装它：

npm install commander

安装完成后，我们就可以在我们的项目中使用 commander 了。接下来，我们创建一个新的 webpack 项目，并安装必要的依赖项：

mkdir my-webpack-project
cd my-webpack-project
npm init -y
npm install webpack webpack-cli --save-dev

然后，我们在项目中创建一个新的配置文件 webpack.config.js，并在其中添加以下代码：

const path = require('path');
const webpack = require('webpack');
const commander = require('commander');

commander
  .option('-d, --dirname <value>', '产品名')
  .option('-p, --port <value>', '端口号')
  .parse(process.argv);

const dirname = commander.dirname;
const port = commander.port;

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    port: port
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.DIRNAME': JSON.stringify(dirname)
    })
  ]
};

在这个配置文件中，我们首先使用了 commander 库来解析命令行参数，并将其存储在 dirname 和 port 变量中。然后，我们在 webpack 的配置中使用这些变量来配置输出路径、端口号和 DefinePlugin。

接下来，我们在项目中创建一个新的 src 目录，并在其中创建一个新的 index.js 文件，并在其中添加以下代码：

console.log('Hello, world!');

现在，我们可以使用以下命令来运行我们的 webpack 项目：

npx webpack serve --config webpack.config.js -- -d product1 -p 8080

在这个命令中，我们使用了 --config 参数来指定 webpack 的配置文件，并使用了 -- 参数来传递命令行参数。

通过这种方式，我们就可以通过一次配置，实现多个项目的运行，并在不同的项目中引用公共代码，实现代码共享。这对于构建大型项目或多个相关项目非常有用。

当然，我们还可以使用其他方法来实现多项目配置共享，例如使用 npm link 或使用 yarn workspaces。但是，使用 webpack4.x 的方法相对来说更加简单和灵活。