老师的这个课程，脉络并不算很清晰。
我尝试着一步步总结下来吧:sweat_smile:。
- webpack官网 官方定义：是一个模块打包器
- webpack官方GitHub
官方GitHub定义：是一个给js准备的打包工具 - （Code Splitting）通过代码分割等方式把众多模块打包成很少的静态文件
- （loader）通过loader可以给js以外的其他文件进行处理以及大包
（例如：html,json,image,css,less等等） - （pulging system）插件系统
- 打包过程：
- 目标
- 减少加载时间
- 把各种模块作为静态文件被引用
- 基本使用方法
- 创建目录
mkdir webpack-test
- 初始化npm
npm init
- 安装webpack
npm install webpack --save--dev
- 编写你的项目
- 打包
>webpack "文件名" "打包后的文件名" 例如(webpack hello.js hello.bundle.js)
- 处理.css 类型文件
- 安装处理 css的loader
npm install css-loader style-loader --save--dev
- 为css指定响应的loader
require('style-loader!css-loader!./style.css')
- css-loader是使得webpack可以解析css文件
- style-loader是使得css文件可以插入html文件里面
- 可以在命令行用以下的命令代替2.
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
- 进入观察模式（每次改变文件，自动编译打包）
--watch (在命令行添加此后缀即可)
- 列出打包过程
--progerss (同上)
- 列出打包的所有模块
--display-modules（同上）
- 列出打包原因
--display-reasons（同上）