我正在尝试升级到Webpack 2.我使用按需加载(使用require.ensure)与Webpack 1成功进行代码分割。但是,对于webpack 2,块的文件名包含一个“未定义”,导致它为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
},
}
我已经尝试过chunkFilename的不同变体(在许多组合中使用[name],[id],[chunkhash])。他们都没有工作。我该如何解决这个问题?
答案 0 :(得分:0)
发现问题。我将__webpack_public_path
设置为未定义的变量。