[英]Webpack 4 Code splitting generating separate vendor files for each route
I am trying webpack 4 (4.0.1) with code splitting.我正在尝试使用代码拆分的 webpack 4 (4.0.1)。 I am using dynamic loading to load React components.The react components, in turn, are importing components from internal npm modules.
我正在使用动态加载来加载 React 组件。而 React 组件又是从内部 npm 模块导入组件。 For instance, In my app I have the following routes.
例如,在我的应用程序中,我有以下路线。
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
In each Home
, About
and Topics
components, I am importing a component from my internal npm module( let us say int-home
, int-about
etc ).在每个
Home
、 About
和Topics
组件中,我从我的内部 npm 模块(让我们说int-home
、 int-about
等)导入一个组件。
export { App as default } from 'int-about'; export { App as default } from 'int-about';
Now with this setup, webpack is spitting out extra vendor bundles corresponding to each dynamic import现在有了这个设置,webpack 会吐出对应于每个动态导入的额外供应商包
What could be possibly wrong with my webpack config?我的 webpack 配置可能有什么问题? How can I make sure that single vendor bundle is churned out in my build?
如何确保在我的构建中生成单个供应商包? Below is the webpack config for my main app.
下面是我的主应用程序的 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'
})
]
}
Taken from this gist:取自这个要点:
https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#configurate-cache-groups https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#configurate-cache-groups
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.