![](/img/trans.png)
[英]Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported module
[英]webpack 4 create separate vendor chunk
我正在尝试为我的项目创建一个单独的供应商块 (vendor.js)。 现在,当我运行 build 时,所有内容都捆绑到我的 app.js 文件中,并且文件很大。 我的项目是一个 html 网站,其文件夹结构在 webpack 中,如下所示:
src/
├── js/
│ └──app.js
├── css/
| └──app.css
└── images/
└── index.html
我的 webpack 配置如下所示:
module.exports = (env, argv) => ({
mode: argv.mode,
devtool: argv.mode === 'development' ? 'source-map' : false,
entry: [
'./src/js/app.js',
'./src/css/app.css'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/app.js'
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin(),
new CopyPlugin({
patterns: [{
from: 'src/*.html',
to: '[name].[ext]'
}, {
from: 'src/images/*',
to: 'images/[name].[ext]'
}]
})
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}, {
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name].[ext]'
}
}
]
}, {
test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: /images/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name].[ext]'
}
}
]
}, {
test: /\.(css)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
['autoprefixer']
]
}
}
}, {
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'assets/app.css'
}),
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,
options: {
quality: 76
}
}],
overrideExtension: true,
detailedLogs: false,
silent: false,
strict: true
})
],
devServer: {
contentBase: [
path.join(__dirname, '/src')
],
watchContentBase: true,
compress: true,
port: 9000,
open: true
}
});
这是我的依赖列表:
"dependencies": {
"@barba/core": "^2.8.0",
"@barba/prefetch": "^2.1.10",
"fitty": "^2.3.2",
"gsap": "file:gsap-bonus.tgz",
"highlight.js": "^10.2.0",
"imagemin": "^7.0.1",
"imagemin-webp": "^6.0.0",
"imagesloaded": "^4.1.4",
"reset-css": "^5.0.1",
"smooth-scrollbar": "^8.5.3"
}
这是我在 webpack 中的第一个项目,从几个不同的在线视频中学到了一切,但没有一个涵盖我想要做的事情。 我继续阅读 webpack 文档并尝试使用显式供应商块,但没有成功。
我的最终目标是将所有依赖项放在 vendor.js 文件中,然后放在 app.js 中,因此 index.html 中的脚本标记如下所示:
<script src="assets/vendor.js"></script>
<script src="assets/app.js" defer></script>
我认为您只需要配置split-chunk-plugin
。 这是基于您需要的非常简单的配置:
// webpack.config.js
module.exports = {
// ...
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
},
},
},
},
}
还有一件事,如果您看到冲突名称错误,您可能需要根据当前文件名更改output.filename
。
{
output: {
filename: "assets/[name].js",
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.