webpack 在不打包的情况下加载 AMD 模块

Question

我正在将一个网络应用从 requireJS 迁移到 webpack。使用requireJS，我根据环境有不同的配置。

对于实时环境，我使用 r.js 来缩小和捆绑我所有的模块及其依赖项合并到一个文件中。之后，我添加 almondJS 来管理依赖项，然后我加载我的 js 包，如下所示：
```
<script src="bundle.min.js"></script> 
```
对于我的开发环境，我像这样加载 requireJS：
```
<script src="require.js" data-main="/main-config"></script> 
```
并且 requireJS 将使用 data-main 指定的我的配置文件来加载模块及其异步依赖

如您所见，使用 requireJS 模块加载和捆绑是两个独立的过程，这使我可以在开发过程中调试 AMD 模块而无需 sourcemaps

如何在开发过程中仅使用 webpack 作为模块加载器而不进行捆绑来实现这种情况？

如果这不可能，有没有其他方法可以在浏览器调试器中查看我的源文件而不生成源映射？

Answer 1

How can I achieve this scenario using webpack as a module loader only without bundling during development ?

Webpack 总是会打包，不管环境如何。

If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?

如果您的代码是 transpiled/compiled，您将需要源映射才能看到它。没有办法解决这个问题。

Answer 2

的确，如果您的代码被转译，那么您将需要源映射。但是可以绕过捆绑。是的，webpack 真的总是会尝试打包，但是有了插件，代码可以从打包中取出并放在输出目录中，就好像它只是运行通过转译器一样。

我有一个节点应用程序，我想将其简单地转换为 ES5 file-by-file，而不捆绑任何东西。所以我的配置大致是这样的：

let config = {
    entry: [
        glob.sync(srcDir + '/**/*.js') // get all .js files from the source dir
    ],
    output : {
        filename : '[name].rem.js',  // webpack wants to bundle - it can bundle here ;) 
        path: outDir
    },
    resolve: {
        alias: {
            'app': appDir
        }
    },
    plugins: [
        new RemoveEmptyScriptsPlugin({extensions: ['js'], scriptExtensions: /\.rem\.js/}) // for all .js source files that get bundled remove the bundle .rem.js file
    ],
    module: {
        rules:[{
            test: /\.jsx?$/,
            type: 'asset/resource', // get webpack to take it out instead of bundling
            generator: {
                filename: ({filename}) => filename // return full file name so directory structure is preserved
            },
            use: {
                loader: 'babel-loader',
                options: {
                    targets: { node: 16 },
                    presets: [
                        ['@babel/preset-env', { modules: 'commonjs' /* transpile import/export */}],
                    ]
                }
            }
        }]
    }
};
// Since the code does not go through the full pipeline and imports are not getting resolved, aliases will remain in the code.
// To resolve them it takes to hack the aliases object into the babel config
config.module.rules[0].use.options.plugins.push(['babel-plugin-webpack-alias-7', {config: {resolve: {alias: config.resolve.alias}}}];

但后来发现目前发布的babel-plugin-webpack-alias-7不支持为config选项提供Object所以我不得不修补插件https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22

啊，然后 webpack-remove-empty-scripts 插件对我的想法有问题所以我也不得不修补它 https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6

webpack 在不打包的情况下加载 AMD 模块

webpack load AMD modules without bundling

javascript

webpack

requirejs