通常，我们都是无感使用webpack，比如：用于类似vue-cli的工具之中，学习webpack最好是从0到1配置一个项目，完成项目的打包需求。

任务需求：

主要应用于大多数传统类型的项目，比如多个html的入口文件。还有与java或者python结合的项目中，如果需要使用预编译语言sass，还需要对图片进行Hash处理，还需要babel对高级的ES语法进行转译，这时候就需要一个多入口打包的webpack配置工程了。

思路点拨：

建议：使用webpack 4.x 或者5.x

配置思想：使用glob模块，读取对应目录下的HTML文件，形成对应的页面与js。

工程目录结构：

.
├── README.md
├── config
│   ├── env-config.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.rules.conf.js
├── package.json
├── postcss.config.js
├── public
│   └── logo-long.png
└── src
    ├── assets
    │   ├── css
    │   │   └── common.css
    │   └── images
    │       └── time.jpg
    └── pages
        ├── deep_page
        │   └── page3
        ├── index
        │   ├── index.html
        │   ├── index.js
        │   └── index.scss
        ├── page1
        │   ├── index.html
        │   ├── index.js
        │   └── index.scss
        └── page2
            ├── index.html
            ├── index.js
            └── index.scss

主要的方法：

function getEntry() {
    var entry = {};
    //读取src目录所有page入口
    glob.sync('./src/pages/**/*.js')
        .forEach(function (name) {
            var start = name.indexOf('src/') + 4,
                end = name.length - 3;
            var eArr = [];
            var n = name.slice(start, end);
            n = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口 
            n = n.split('pages/')[1];
            eArr.push(name);
            entry[n] = eArr;
        });
    return entry;
};