webpack进阶【15】: 打包提取公共模块配置

webpack : 打包前提取公共模块配置、

注意：本进阶是在 webpack 进阶 【13】的基础上进行衍生。

一、为什么要进行公共模块配置?下面我们来举例说明

• 1、在 adout.js 中写入以下内容

import $ from 'jquery'      // 用了 babel-loader 配置，现在可以用 import 引入
const div = $('div');

const app = document.querySelector('#app');
const h1 = document.createElement('h1');
h1.innerText = '这是一个 index.js文件';
app.appendChild(h1)

• 2、在 index.js 中写入以下内容

import $ from 'jquery'      // 用了 babel-loader 配置，现在可以用 import 引入
const div = $('div');

const app = document.querySelector('#app');
const h1 = document.createElement('h1');
h1.innerText = '这是一个 index.js文件';
app.appendChild(h1)

• 3、 由 index.js 和 about.js 中我们发现，两个 js 都 引用了 相同的模块 jquery. 现在我们进行打包脚本

cnpm run build

• 4、 打包后，我们查看 dist 文件夹下面的两个 js 大小，发现 dist 下面的两个 index.js 和 about.js 大小都很大，但是我们写入的内容很小，就以上几行。两个 js 大小都这么大是因为两个 js 都引入了 jquery。jquery 比较大的原因。这时候我们就需要提取公共模块。

  
  
  image.png

二、webpack.base.js 配置

• 1、 在 config 文件夹下 webpack.base.js 中写入如下代码

module.exports = {
    ...
    // 公共模块提取
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

• 2 、执行打包脚本

cnpm run build

• 3、现在查看 dist 下面的文件，发现生成了 3 个 js, 公共部分 jquery 被提取出来放在了 vendors_aboutindex.js 文件中。
  
  image.png