能否用Webpack imports-loader随JS依赖引入CSS？（RequireJS转Webpack4适配）

嘿，我刚好踩过RequireJS迁移到Webpack 4的坑，尤其是你说的这种shim里带CSS依赖的场景——既要并行运行又要少改业务代码，给你几个实用的方案：

方案1：手动创建Shim中间模块（最灵活，侵入性低） #

这个思路是用一个中间模块模拟RequireJS的shim依赖顺序，让Webpack先加载CSS和前置JS，再加载目标模块：

1. 先安装必要的CSS loader：

npm install css-loader style-loader --save-dev

2. 在项目里创建一个shims目录，比如shims/jsDependency.js，内容如下：

// 先加载CSS依赖（对应RequireJS里的css!cssDependency）
import 'style-loader!css-loader!../path/to/cssDependency.css';
// 再加载前置JS依赖
import '../path/to/otherJsDependency.js';
// 最后导出目标JS模块
export * from '../path/to/jsDependency.js';

3. 在Webpack配置的resolve.alias里映射原模块名到这个shim模块：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'jsDependency': path.resolve(__dirname, 'shims/jsDependency.js')
    }
  }
};

这样业务代码里的require('jsDependency')或者define(['jsDependency'], ...)都会自动触发依赖加载顺序，和RequireJS的shim行为完全一致，业务代码不用改。

方案2：用webpack-requirejs-loader直接复用RequireJS配置 #

如果你的项目有大量shim配置，不想一个个写中间模块，可以用这个loader直接解析RequireJS的语法和shim规则：

1. 安装loader：

npm install webpack-requirejs-loader --save-dev

2. 在Webpack配置里添加loader规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['webpack-requirejs-loader']
      }
    ]
  }
};

3. 引入原有的RequireJS配置文件，让loader识别shim：

const requireJsConfig = require('./path/to/your/requirejs.config.js');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'requirejs.config': JSON.stringify(requireJsConfig)
    })
  ]
};

这个loader会自动处理css!前缀的依赖，把它们转换成Webpack能识别的CSS导入，甚至能直接复用原有的RequireJS路径配置，几乎不用修改业务代码就能并行运行。

方案3：开发阶段并行的小技巧 #

如果只是想在开发阶段让两者共存，可以：

• 用Webpack Dev Server打包生成一个独立的bundle，在测试页面里同时加载RequireJS和Webpack的bundle
• 对于已经通过RequireJS加载的模块，用Webpack的externals配置排除打包，比如：

module.exports = {
  // ...其他配置
  externals: {
    'otherJsDependency': 'otherJsDependency',
    // 注意：如果用方案1或2，这里不需要配置CSS的external
  }
};

这样Webpack不会打包这些模块，而是直接用RequireJS已经加载好的全局变量。

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