webpack 无需捆绑即可加载 AMD 模块答案

【问题标题】：webpack load AMD modules without bundlingwebpack 无需捆绑即可加载 AMD 模块
【发布时间】：2018-09-12 13:32:58
【问题描述】：

我正在将 web 应用程序从 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 模块而无需源映射

如何在开发过程中不捆绑使用 webpack 作为模块加载器来实现这个场景？

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

【问题讨论】：

标签： javascript webpack requirejs

【解决方案1】：

如何在开发过程中不捆绑使用 webpack 作为模块加载器来实现这个场景？

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

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

如果您的代码被转译/编译，您将需要源映射来查看。没有办法解决这个问题。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：