前端工程化探索学习之模块打包工具webpack(1)

一、这是第一次阅读webpack整理的简单结构脑图

1. 参考网址:模块（Modules） | webpack 中文文档

2.浏览完webpack的大致概念后：大致的思考：

(1)webpack的作用是什么?

(2)webpack的书写格式和大致结构是什么?

(3)webpack的核心功能是由什么怎样的数据结构实现的?

(4)webpack的加载和运行分为几个过程，分别执行了哪些操作?

(5)webpack的简单书写方式，和不同书写方式间，在较为复杂的情况下的更优写法是什么?

二、围绕相关webpack的问题学习和寻找答案

1.官方文档上说webpack是一个静态模块打包工具，这应该是webpack最初的作用。但是衍生到现在，是链接前端工程化工具的重要纽带。同时实现了，代码分离，和前端的界面的按需加载需求。可以获取更小的bundle文件，控制资源的加载优先级。

2.大致书写结构: --(参考阮一峰webpack基本配置demo仓库)    简单配置文件的入口和输出、以及加载常用的模块。

module.exports={
entry:'./main.js',
output:{
filename:'bundle.js',
}
module:{
rules:
[
    {
    test:'/\.js[x]?$/',//加载babel
    exclude:'/node_modules',
    use:{
        loader:babel-loader,
        option:['es2015','react']}
    },
    {
    test:/.\css$/, //css模块加载
    use:[{
    loader:'style-loader',
    },
    {
    loader:'css-loader',
    option:'{modules:true}'
    }
    ]
]
}
}

3.webpack的核心功能和特性思考，及涉及到的原因

（1）webpack所有的资源都被认为是模块，因此可以被引用、修改、操作，最后整合到项目模块中

相关原因整理和思考:webpack模块导入主流程是一个立即执行函数(IIFE),函数的入参是module对象，对象的key是每个js模块的相对路径，value是一个函数。不断执行require从而不断加载所依赖的模块.(对应的加载机制_webpack_require_),

在这个过程中优先取缓存中的module,如果缓存中没有，则创建并放入到缓存中。不断传递module对象后返回module.exports变量。根据传递的顺序形成相应的加载树。

（2）通过实现代码分离，从而达到资源的动态加载，加快页面打卡速度，优化性能。编写代码的时候可以热更新。

     相关原因整理和思考:具体暂时不是很了解，更具体的待深入了解后整理. 暂时的想法是，在webpack处理模块的过程中。对部分需要动态加载的模块，执行异步导入，也就是懒加载。在页面加载需要的时候，push到相应的chunks中。

开启一个本地服务webpack-dev-server，监听工程文件的改动，自动重新打包，刷新浏览器。开发模式下的本地服务打包，不会生成实际文件。只存在内存中。

4.初步来看webpack的加载和运行，经历了三个状态，module、chunks、bundle。分别代表着，导入的模块，正在打包的模块，打包完成后运行在浏览器中的源文件。    根据需求动态导入模块到生成模块加载树，最后生成浏览器运行的文件。

三、待思考和探索的问题

1.webpack相对成熟和常用的module加载和plugins的搭配组合写法？在处理较为庞大的项目中时，webpack对应的组合和写法。

2.webpack动态加载模块的实现方式和对应的基本原理?