Set correct path to lazy-load component using Webpack - ES6

Question

In my app.js file I have the following event inside a function where I import another module (same as in the docs) using the lazy-loading technique:

button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
    var print = module.default;

    print();
});

And in my webpack config I set up this (besides Babel, SASS loaders, etc):

const path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
watch: true,
entry: {
    main: ['babel-polyfill', './src/js/app.js','./src/sass/main.sass']
},
output: {
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, "dist"),
    filename: '[name].js',

},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["babel-preset-env", "babel-preset-stage-0"]
                }
            }
        },
        {
            test: /\.sass$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        query: {
                            sourceMap: false,
                        },
                    },
                ],
            }),
        },
    ]
  }    
}

The problem is the path "./print" is from my "src" folder and not from my "dist" folder, where webpack puts all the bundles, so I get a 404 error. If I change the path to "./dist/print" then the webpack build will crash.

Am I missing a webpack configuration?

Edit: Folder structure:

src 
    js
        app.js
        print.js
dist
    main.bundle.js
    print.bundle.js

Bertrand · Accepted Answer · 2018-05-15T11:40:19.890

0

You don't have to treat with the modules path in dist folder, only in src folder.

There is two solutions I think :

1/ Specify src path in your import statement :

button.onclick = e => import(/* webpackChunkName: "print" */ './src/js/print').then(module => {
    var print = module.default;

    print();
});

2/ Personally, What I usually do is to add src folder to resolved paths in config file:

resolve: {
    modules: [
      path.resolve('./node_modules'),
      path.resolve('./src/js')
    ],
    extensions: ['.json', '.js']
  },

Your code should then work without changing a line.

edited May 15 '18 at 11:40

answered May 15 '18 at 10:06

Bertrand

1,840
14
22

app.js is already in "src" folder, exactly in src/js/. So no need to specify it in the code, right? – Ismael Ordás May 15 '18 at 10:16
Webpack can't guess where your source files are, so you DO need to either specify full path from webpack base path (usually project root) or add this folder in the resolve section. I've updated my answer with your tree. – Bertrand May 15 '18 at 11:39
I have included all the webpack config I had. With your second sugestion still have a 404 error, it does not go to /dist/ folder to get the module. – Ismael Ordás May 15 '18 at 13:53
Weird. Can you post your whole config file ? Ooops. Disn't notice :) – Bertrand May 15 '18 at 13:55
3

Can u try to set publicPath property in output to '' ? See https://webpack.js.org/guides/public-path/ – Bertrand May 15 '18 at 13:58
That was it, the publicPath property. I set publicPath: 'dist/' and now it goes to the right path. Thanks a lot. – Ismael Ordás May 15 '18 at 14:07

Set correct path to lazy-load component using Webpack - ES6

1 Answers1

Linked