为什么React Chunking不工作？
我正在尝试使用webpack来分块我的react应用程序，但是什么都没有加载，并且它显示vendor.js显示为0字节。我做错了什么？我想我的index.html出了点问题。vendor.js和index.js都位于src文件夹中。我已经试过了，但没找到https://github.com/webpack/webpack/issues/368
Webpack
var webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
vendor: './src/vendor.js'
},
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor.js')
],
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="/bundle.js"></script>
</html>回答 2
Stack Overflow用户
发布于 2017-02-24 23:30:25
您应该通过导入将所有常见的依赖项添加到vendor.js中，例如jquery、lodash、post-css、jss或您正在使用的任何其他依赖项。
由于您没有这样做，可能是因为您的vendor.js文件的大小为0字节。
将您的CommonsChunkPlugin更改为
new webpack.optimize.CommonsChunkPlugin({
name : 'vendor',
}),此外，您还需要更改index.html
因为在你的webpack配置中
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js'
},这里
filename: '[name].js'意味着文件将由webpack根据条目名称app.js和vendor.js生成
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="/vendor.js"></script>
<script src="/app.js"></script>
</html>Stack Overflow用户
发布于 2017-02-24 17:41:53
将new webpack.optimize.CommonsChunkPlugin('vendor.js')更改为new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js', Infinity)
或者最好是new webpack.optimize.CommonsChunkPlugin('vendor','vendor.[chunkhash].js', Infinity)
我建议您迁移到Webpack 2. Refer migrating guide
https://stackoverflow.com/questions/42433688
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号