I'm trying to upgrade to Webpack 2. I used code-splitting with on-demand loading (using require.ensure) with Webpack 1 successfully. However, with webpack 2 the filename of the chunk contains an "undefined" which causes it to 404.
webpack.config.js
{
entry: {
'main': 'index.ts',
'vendor': 'vendor.ts'
},
output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[hash].js',
path: path.resolve(__dirname, '../dist')
},
devServer: {
proxy: {
//proxy info
}
},
resolve: {
modules: [
helper.root('src'),
'node_modules'
],
extensions: ['.ts', '.js', '.json'],
},
cache: false,
devtool: 'cheap-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new ExtractTextPlugin({
filename:'[name]-[hash].css',
allChunks: true
}),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: true
}),
new ngAnnotatePlugin({
add: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new webpack.LoaderOptionsPlugin(require('../tslint.json')),
new webpack.LoaderOptionsPlugin({
configFile: './.htmlhintrc'
}),
new webpack.LoaderOptionsPlugin({
configFile: './.sass-lint.yml'
}),
new DashboardPlugin(),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(de|en|fr|ko|ja|zh-cn)$/)
],
module: {
rules: loaders
},
}
I've already tried different variations to chunkFilename (using [name], [id], [chunkhash] in many combinations). None of them work. How do I fix this?
Found the problem. I had __webpack_public_path
set to a variable that was undefined.