webpack中resolve.modules导入文件的loader配置及多项目共享公共目录

我来帮你搞定这个多项目共享公共代码的问题，同时解决Webpack处理公共目录文件时的loader配置问题，咱们一步步来：

一、让项目能轻松导入公共目录的文件 #

最直接的方式是在每个项目的Webpack配置里设置别名（alias），这样写导入路径的时候更清晰，Webpack也能准确找到文件。

打开project1/webpack.config.js和project2/webpack.config.js，添加如下配置：

const path = require('path');

module.exports = {
  // ... 保留你原本的其他配置
  resolve: {
    alias: {
      // 用@common作为公共目录的别名，指向父目录下的common文件夹
      '@common': path.resolve(__dirname, '../common')
    }
  }
};

配置好之后，你在两个项目的src/index.js里就可以这样导入公共组件了：

// project1/src/index.js
import CommonComponent from '@common/components/CommonComponent.vue';

// project2/src/index.js 同理
import CommonComponent from '@common/components/CommonComponent.vue';

二、解决Webpack Loader不处理公共目录文件的问题 #

默认情况下，Webpack的loader规则通常只针对项目自身的src目录，所以公共目录里的.vue、.js文件可能得不到正确的loader处理。我们只需要调整loader的include配置，把公共目录也加进去就行。

比如处理.vue文件的vue-loader，修改配置如下：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        // 同时包含项目自身src和上级的common目录
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, '../common')
        ]
      },
      // 处理JS文件的babel-loader也要做同样的配置
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, '../common')
        ]
      }
      // 如果有CSS、SCSS等其他文件的loader，也需要把common目录加入include
    ]
  }
};

这里用include比exclude更安全，能精准指定Webpack需要处理的目录，避免误处理第三方依赖包。

可选优化：把公共目录做成本地npm包（更规范的模块化方式） #

如果你的common目录里有大量公共代码，还可以把它做成一个本地npm包，通过npm link在两个项目里复用，这样导入方式更像第三方依赖：

1. 进入parentDir/common目录，执行npm init -y生成package.json
2. 在common的package.json里设置main字段，比如："main": "./application/app.js"（根据你的实际入口文件调整）
3. 在common目录执行npm link，把这个包注册到本地npm环境
4. 分别进入project1和project2目录，执行npm link common（这里的common是你在common/package.json里设置的name字段）

之后你就可以像导入第三方包一样使用公共代码了：

import CommonComponent from 'common/components/CommonComponent.vue';
import app from 'common/application/app.js';

这种方式下，记得调整Webpack的loader配置，让它能处理node_modules里的这个本地包（可以把path.resolve(__dirname, '../common')换成path.resolve(__dirname, 'node_modules/common')，或者直接去掉exclude里的node_modules限制，但后者要谨慎）。

内容的提问来源于stack exchange，提问作者Tim Barclay