webpack学习（十二）：多页面提取公共部分(js&css)

小鱼儿 2022-04-08 10:12 217阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次配置完多页面 : [https://blog.csdn.net/qq593249106/article/details/84933978][https_blog.csdn.net_qq593249106_article_details_84933978]

## 使用SplitChunksPlugin ##

The CommonsChunkPlugin 已经从 webpack v4 legato 中移除, webpack 4+ 版本使用内置的 SplitChunksPlugin 插件来进行公共部分的提取:

## 配置 webpack.config.js ##

因为 SplitChunksPlugin 是 webpack 4+ 版本内置的插件, 所以无需安装, 只需在 webpack.config.js 中配置

optimization: { 
            splitChunks: { 
                cacheGroups: { 
                    //打包公共模块
                    commons: { 
                        chunks: 'initial', //initial表示提取入口文件的公共部分
                        minChunks: 2, //表示提取公共部分最少的文件数
                        minSize: 0, //表示提取公共部分最小的大小
                        name: 'commons' //提取出来的文件命名
                    }
                }
            }
        }

## 注意 ##

还要在每一个页面的 HtmlWebpackPlugin 的 chunks 加上 commons, 因为提取之后的 commons 需要被打包出来的页面引用!

**webpack.config.js**

这里修改一下目录结构, 在 src 新建一个 common 文件夹, common 文件夹下新建一个 css 文件夹, 专门用来放公共的 css 文件, 新建一个 common.scss 放入 css 文件夹中, 测试能否打包这个公共的 scss:  
**common.scss**

$fontSize: 100px; h1 { 
      font-size: $fontSize;
    }

修改一下 index.js, otherA.js, otherB.js, 让它们都引入公共样式 common.scss:  
**index.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './index.scss'
    import '../../common/common.scss'
    
    render(<App />, document.getElementById("root"))

**otherA.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './otherA.scss'
    import '../../common/css/common.scss'
    
    render(<App />, document.getElementById("root"))

**otherB.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './otherB.scss'
    import '../../common/css/common.scss'
    
    render(<App />, document.getElementById("root"))

## 打包 ##

终端输入 npm run build, 发现 dist 目录下的 css 和 js 文件夹分别多了 commons.css 和 commons.js, 而且其他 css 和 js 文件大小都变小了

打开 index.html, otherA.html, otherB.html:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20181210211721536.png]  
公共样式 h1\{font-size:100px\} 起了效果, 提取公共 js&css成功

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84933978]: https://blog.csdn.net/qq593249106/article/details/84933978
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/a19332771284464397b1dbd9a4e40fac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220406/891388ec5f8b4cce8419b060edcc4129.png
[20181210211721536.png]: /images/20220406/623003294dc54d3b8242b2fcbf5f0934.png