前端工程化

webpack 配置

基本使用:entry、plugin、output、module

常见 webpack loader

1. file-loader
2. babel-loader
3. url-loader
4. sass-loader
5. css-loader
6. style-loader

常见 webpack plugin

plugin 是插件，在 webpack 允许的生命周期中会广播出许多事件，plugin 可以监听这些事件。
html-webpack-plugin: 简化 html 创建
clean-webpack-plugin: 目录清除
mini-css-extract-plugin：分离样式文件
uglifyjs-webpack-plugin：压缩 js 文件

前端模块化

CommonJS

CommonJS 是服务器端模块的规范，由 Node 推广使用，webpack 也采用这种规范编写。
commonJs 规范：
CommonJS 模块规范主要分为三部分：模块定义、模块标识、模块引用。

模块定义：module 对象：在每一个模块中，module 对象代表该模块自身。 export 属性：module 对象的一个属性，它向外提供接口。输出模块变量的最好方法是使用 module.exports 对象。一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为 global 对象的属性。
模块标识：传递给 require 方法的参数，必须是符合小驼峰命名的字符串，或者以 . 、… 、开头的相对路径，或者绝对路径。
模块引用：加载模块使用 require(同步加载)，该方法读取一个文件并执行，返回文件内部的 module.exports 对象

AMD

AMD 是运行在浏览器环境的一个异步模块定义规范 ，是 RequireJS 在推广过程中对模块定义的规范化产出

CMD

CMD 是一个通用模块定义规范；是 SeaJs 推广过程中对模块定义的规范化产出