webpack打包9之多入口配置

我们之前完成的配置是单入口，只有一个入口。那么如果有多个入口我们要怎么配置呢？
1、在src下新建两个js文件
aa.js

const $ = require('jquery') //引入jquery 并赋值给$,方便之后使用jquery,直接用$就好
console.log($('div'))

const app = document.querySelector('#app');
const h1 = document.createElement('h1');
h1.innerHTML = 'hello world222'
app.appendChild(h1);

main.js

// // // alert('hello world!')
// require('./css/main.css');
// require('./css/index.css');
// require('./less/header.less');


// // require('./index.html')
// require('./aa.js');
const $ = require('jquery') //引入jquery 并赋值给$,方便之后使用jquery,直接用$就好
console.log($('div'))
// console.log('这是main.js')
// $(function () {
//     $('#app li:nth-child(odd)').css('color','red')
//     $('#app li:nth-child(even)').css('color','green')
// })
const app = document.querySelector('#app');
const h1 = document.createElement('h1');
h1.innerHTML = 'hello world'
app.appendChild(h1);

2、修改baseconfig文件中入口出口的配置

   //1、入口，从那个文件开始打包
    entry: { //多入口
        index:'./src/aa.js',
        main:'./src/main.js',
    },
    //2、出口对象
    output: {
        path: path.join(__dirname, '../dist'),//打包到哪里去,打包路径 注意输出路径必须是绝对路径
        filename: 'js/[name].bundles.js'//打包后生成的文件名

    },

3、yarn build打包
打包后发现，dist下js里面有两个包，分别是

4、多入口配置之后，提取公共模块，防止浪费资源
虽然分包配置成功，但是两个包占的内存非常大，因为他们两个都加载了jquery，我们可以优化一下。把公共模块提取出来打成单独的包。
从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，你可以通过 optimizaiton 节点进行覆盖配置。在 easywebpack 体系中，会进行进步配置简化。

• runtimeChunk 默认文件名为 runtime
• 通过 splitChunks 抽离的公共 js 文件名为 common
• 通过splitChunks 抽离的公共 css 文件名为 common

在module.exports 中配置

module.exports = {
    //3、通过optimizaiton配置提取公共模块
    optimization: {
        splitChunks: {
            chunks: 'all',
        }
    },
}

再次打包，发现公共部分已经被提取打包

注意公共模块必须大于30kb才独立打包，jquery大小是87kb。所以独立打包了