webpack基础入门

一、核心概念

• Entry：入口，Webpack执行构建的第一步是从Entry开始，可抽象为输入；
• Module：模块，在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块；
• Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割；
• Loader：模块转换器，用于将模块的原内容按照需求转换为新内容；
• Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或者做我们想做的事；
• Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出的结果。

大致流程如下：
Webpack在启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module，就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析当前Module依赖的Module。这些模块会根据Entry为单位进行分组，一个Entry及其所有依赖的Module被分到一个组内，也就是一个Chunk。最后，Webpack会将所有Chunk转换成文件输出。在整个流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑。

详解Webpack核心概念

（一）、Entry

Entry配置是必填的，如果不填将会导致Webpack报错，退出。
1、context：Webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动Webpack时所在的当前工作目录。

context: path.resolve(__dirname, '../'),

需要注意的是，context必须是一个绝对路径的字符串。
2、Entry类型：可以为string、array、object三者中任意类型。

• string：'./app/entry'、入口模块的文件路径，可以是相对路径；
• array：['./app/entry1','./app/entry2']、入口模块的文件路径，可以是相对路径；
• object：{a:'./app/entry'，b:['./app/entry1','./app/entry2']}，配置多个路口，每个入口生成一个chunk。

3、Chunk的名称
Webpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关。

• 如果Entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main；
• 如果Entry是一个object，那么会出现多个Chunk，这时Chunk的名称是object键值对中键的名称。

4、为MPA应用配置Entry

在untils.js文件中添加如下代码逻辑：

// untils.js
const path = require('path')
const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages');
exports.entries = function() {
   
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {
   }
 entryFiles.forEach((filePath) => {
   
   var