webpack配置提取公共代码

最新推荐文章于 2022-09-13 14:10:08 发布

转载最新推荐文章于 2022-09-13 14:10:08 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangguoe/p/9882266.html

文章标签：

#webpack #ViewUI

本文详细介绍了如何使用webpack进行公共代码的提取，通过配置splitChunks缓存组，实现从多入口文件中抽离公共模块，提高应用加载速度。具体展示了在pageA.js和pageB.js中引用subPageA.js和subPageB.js时，如何设置webpack.config.js来优化代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公共代码提取功能是针对多入口文件的；

　　背景：在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js

　　webpack.config.js文件：

 1 var path = require('path')
 2 module.exports = {
 3     entry:{
 4         pageA:'./src/pageA.js',
 5         pageB:'./src/pageB.js'
 6     },
 7     output: {
 8         filename: "[name].js",
 9         path:path.resolve(__dirname,'./dist')
10     },
11     optimization: {
12         splitChunks:{
13             cacheGroups: {
14                 vender:{
15                     test:/node_modules/,
16                     chunks:'initial',
17                     name:'vender',
18                     priority:10
19                 },
20                 utils:{
21                     chunks:'initial',
22                     name:'utils',
23                     minSize:0
24                 }
25             }
26         }
27     }
28 }