webpack 不捆绑加载AMD模块

Question

我正在将 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 模块而无需 sourcemaps

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

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

Answer 1

如何仅在开发过程中不捆绑使用webpack作为模块加载器来实现此方案？

尽管有环境，Webpack仍将始终捆绑在一起。

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

如果您的代码已被编译/编译，则需要源映射才能看到。 没有解决方法。

Answer 2

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

我有一个节点应用程序，我想简单地逐个文件地转换为 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-别名 7/拉/22

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