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.
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
I found that I remove all comments in
.babelrc, so magic comments won’t work this time.remove .babelrc comments attribute. I’ve solved it.