/* webpackChunkName: “name” */ is not working

Do you want to request a feature or report a bug?
bug

What is the current behavior?
/* webpackChunkName: “name” */ is not working

If the current behavior is a bug, please provide the steps to reproduce.

Reproduce

I would like this two component to be bundled in one file:

import Loadable from 'react-loadable'

const AsyncOne = Loadable({
  loader: () => import(/* webpackChunkName: "name" */ './AsyncOne'),
  loading: () => null
})

const AsyncTwo = Loadable({
  loader: () => import(/* webpackChunkName: "name" */ './AsyncTwo'),
  loading: () => null
})

Here is my configuration:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'static/js/[name].bundle.js',
        chunkFilename: 'static/js/[name].bundle.chunk.js'
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [
            path.resolve(__dirname, './src'),
            path.resolve(__dirname, './node_modules')
        ]
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, './src')]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': "'production'"
        }),
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, './dist/index.html'),
            template: 'index.html',
            inject: true
        })
    ]
};

But after I run webpack, I got this:

Hash: c99e2194c09b453275fa
Version: webpack 3.8.1
Time: 3620ms
                      Asset       Size  Chunks                    Chunk Names
static/js/0.bundle.chunk.js  634 bytes       0  [emitted]         
static/js/1.bundle.chunk.js  634 bytes       1  [emitted]         
  static/js/index.bundle.js    1.03 MB       2  [emitted]  [big]  index
                 index.html  305 bytes

What is the expected behavior?

AsyncOne and AsyncTwo are packed in one file name.bundle.chunk.js.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

node: 6.11.4
os: macOS 10.13
webpack: 3.8.1

Author: Fantashit

2 thoughts on “/* webpackChunkName: “name” */ is not working

Comments are closed.