webpack load AMD modules without bundling

Question

I'm migrating a web app from requireJS to webpack. With requireJS, I have different configurations depending on the environment.

• For live environment I use r.js to minify and bundle all of my modules and their dependencies into a single file. Afterwards, I add almondJS to manage the dependencies and then I load my js bundle like the following:

   <script src="bundle.min.js"></script>

• For my development environment, I Load requireJS like this:

   <script src="require.js" data-main="/main-config"></script>

  and requireJS will use my configuration file specified by data-main , to load modules and their dependencies asynchronously

As you can see, with requireJS module loading and bundling are two separate processes and that allows me to debug AMD modules during development without needing sourcemaps

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

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

Answer 1

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

Webpack will always bundle, despite the envieronment.

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

If your code is transpiled/compiled, you'll need sourcemaps to see that. There is no way to workaround that.

Answer 2

It's true that if your code is transpiled then you'll need sourcemaps. But it is possible to get around bundling though. Yes, webpack will really always try to bundle, but with plugins the code can be taken out of the bundle and placed in the output directory as if it was simply run through the transpiler.

I have a node application that I want to simply transpile to ES5 file-by-file and not bundle anything. So my config to do that is roughly this:

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}}}];

But then it appeared that the currently published babel-plugin-webpack-alias-7 does not support providing an Object to the config option so I had to patch the plugin https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22

Ah, and then the webpack-remove-empty-scripts plugin had an issue with my idea so I had to patch that too https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6