一、这是第一次阅读webpack整理的简单结构脑图
1. 参考网址:https://webpack.docschina.org/concepts/modules/
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动态加载模块的实现方式和对应的基本原理?
转载：https://blog.csdn.net/qq_36412077/article/details/114853056