最近学习了 webpack 4.0 ，看了一遍视频教程，也翻看了一下官方文档，略有一些感受，在此记录一下。
webpack 之魂 - 万物皆模块
在 webpack 中，所有的文件都是都是模块，webpack 默认加载 js ，在 loader 的辅助下，任意都可以被加载进来。
在学习视频中，看了打包后的源码，也理解了 webpack 的运行机制。它实际上是将每一个模块以编译成可加载的状态，再以模块的绝对路径为键，生成一个依赖模块对象。
例如：
{
'/src/js/a.js': function(module, exports, __webpack_require__){
eval('// code .')
},
'/src/js/b.js': function(module, exports, __webpack_require__){
eval('// code .')
}
}
然后在 eval 这个执行的代码中，又使用 module、exports、__webpack_require__ 这几个模块，进行导出和导入，以此来层层嵌套。
webpack 之足 - loader
loader 的作用一般是对模块进行一个转换，例如加载 css 模块，则会被解析成以下步骤：
- 取得这个 css 文件的内容源码
- 生成 style 标签
- 插入 css 源码插入 style 标签中
- 将 style 标签插入 head 标签中
如果是 scss ，则是第一步取得 scss 源码，使用 node-sass 进行编译，输出 css 源码
就很好理解，就是什么样类型的文件，你希望怎么处理他，再使用 js 进行引入。
上面的 css 例子，只是简单地，一般还会对 css 内部的 image 的引入的地址进行修改替换，这里简单说明
可以自己去写一个 loader，其实就是返回一个函数，通过这个函数对 webpack 配置上匹配的文件进行处理。
比如简单按照上面的步骤，写一个 css-loader：
function cssLoader(source) {
return `
let style = document.createdElement('style');
style.innerHTML = ${JSON.stringify(source)};
document.head.appendChild(style)
`
}
module.exports = cssLoader
这就是一个简单的 css-loader，当页面上引入这个 css，则会替换为这个内容，比如:
- /src/css/a.css
a {
color: red;
}
在引入后就会被 css-loader 处理为:
// 这是一个字符串
;`
let style = document.createdElement('style');
style.innerHTML = 'a { color: red } ';
document.head.appendChild(style)
`
然后被 webpack 以模块打包后，就是这样：
{
'/src/css/a.css': function(module, exports, __webpack_require__){
eval(`
let style = document.createdElement('style');
style.innerHTML = 'a { color: red } ';
document.head.appendChild(style)
`)
}
}
webpack 之手 - plugins
对于 plugins，其实也没有太复杂的，原理就是在 webpack 编译的时候，会注册很多事件，有同步有异步，插件可以在内部去在监听事件，当 webpack 执行到了某一步，插件就去进行相应。
其实就很好理解。。不知道写什么例子，有时间再补充吧，先这样。。
