How to include manual import() in Webpack Bundle

I am quite new to Webpack, so bear with me if thats a stupid question.

My goal is to transform my old, AMD based codebase to a ES6 Module based solution. What I am struggling with is handling dynamic import()s. So my app router works on a module basis, i.e. each route is mapped to a module path and then required. Since I know what modules will be included, I just add those dynamically imported modules to my r.js configuration and am able to build everything in a single file, with all require calls still working.

Now, I am trying to do the same with ES6 modules and Webpack. With my devmode this is no problem as I can just replace require() with import(). However I cannot get this to work with bundling. Either Webpack splits my code (and still fails to load the dynamic module anyways), or - if I use the Array format for the entry config, the dynamic module is included in the bundle but loading still fails: Error: Cannot find module '/src/app/DynClass.js'

This is how my Webpack config looks like:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: "development",
    entry: ['./main.js', './app/DynClass.js'],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, "../client/")
    },
    resolve: {
        alias: {
            "/src": path.resolve(__dirname, '')
        }
    },
    module: {
        rules: [
            {
                test: /\.tpl$/i,
                use: 'raw-loader',
            },
        ]
    }
};

So basically I want to tell Webpack: "hey, there is another module (or more) that is to be loaded dynamically and I want it to be included in the bundle"

How can I do this?

from How to include manual import() in Webpack Bundle

How to include manual import() in Webpack Bundle 2019-03-16T09:32:00-07:00 Rating: 4.5 Diposkan Oleh: Admin