我正在尝试使用代码拆分的webpack 4(4.0.1) . 我正在使用动态加载来加载React组件 . 反应组件又从内部npm模块导入组件 . 例如,在我的应用程序中,我有以下路线 .
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
在每个 Home
, About
和 Topics
组件中,我从我的内部npm模块导入一个组件(让我们说 int-home
, int-about
等) .
从'int-about'导出;
现在有了这个设置,webpack正在吐出与每个动态导入相对应的额外供应商包
我的webpack配置可能有什么问题?如何确保在我的构建中生成单个供应商捆绑包?下面是我的主应用程序的webpack配置 .
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry :'./src/index.js',
output : {
filename: '[name].js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath:'dist/',
library : '',
libraryTarget:'umd'
},
resolve:{
extensions: ['.', '.js', '.jsx']
},
mode : process.env.NODE_ENV == 'production' ? 'production' : 'development',
module : {
rules : [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader:'css-loader',
options:{
minimize : true,
sourceMap: true,
modules:true,
localIdentName: '--[hash:base64:8]'
}
}
})
},
{ test: /\.jsx?$/, use: 'babel-loader' }
]
},
optimization:{
splitChunks:{
cacheGroups:{
vendor: {
chunks: 'initial',
test: path.resolve(__dirname, 'node_modules'),
name: 'vendors',
enforce: true,
},
},
}
},
plugins:[
new ExtractTextPlugin({
filename:"[name].css",
allChunks:true
}),
new webpack.EnvironmentPlugin({
NODE_ENV: process.env.NODE_ENV,
}),
new BundleAnalyzerPlugin({
analyzerMode : 'static'
})
]
}
1 回答
从这个要点
https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#configurate-cache-groups
}