webpack 4
第1课 概念
1 模块化工具 构建工具 打包工具
2 webpack把所有的东西打包成js文件，压缩图片，把sass生成css,
3 热加载
4 自己有服务器
第2课 安装
1 先安装NodeJS node --version
2 换成淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
3 npm install -g webpack
4 或 npm install --save-dev webpack
第3课 实现Hello World
1 npm init
2 建好文件夹 src/app.js dist
3 装命令行包 npm install webpack-cli -g
4 正式开始 注意要设置环境类型 webpack src/app.js -o dist/bundle.js --mode development
如果写--mode production 则打出来的会是压缩版（就一行）
3.1 - 监控
加上实时监控 webpack src/app.js -o dist/bundle.js --mode development --watch
3.2 - 安装本地服务器
npm install -D webpack-dev-server
3.3 “__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
3.4 配置文件 webpack.config.js
2019-01-14 继续学
scss less 预处理器
1 可用命令来执行webpack，但通过配置文件来使用webpack更好
2 使用webpack构建本地服务器 npm install --save-dev webpack-dev-server
3 devServer 是本地服务器的配置
4 loaders 可以把 scss 转换为 css，可把React中的jsx转换成js
| babel核心功能位于哪个包里 | babel-core |
| babel里解析es6的包 | babel-env-preset |
| bable里解析jsx的包 | babel-preset-react |
| css-loader | 可使用类似 @import 和 url(...) 的方法实现require()的功能 |
| style-loader | 将所有计算后的样式加入页面 |
| 通过合适的配置webpack也可以把css打包为单独的文件 | |
| CSS modules | 通过CSS模块，所有的类名，动画名默认都只作用于当前模块 |
| css预处理器有哪些 | sass less |
| 在webpack里使用相关的loaders进行配置，就可以使用css预处理器 | Less Loader Sass Loader Styls Loader |
| PostCSS是干什么的 | 为CSS代码添加适应不同浏览器的CSS前缀 |
| 安装PostCSS | npm install --save-dev postcss-loader autoprefixer |
| Plugins | |
| Webpack 里的 Loader 是干什么的 | 打包构建过程中来处理源文件的 jsx scss less 一次处理一个 |
| webpack的插件 Plugins 有什么功能 | 它直接对整个构建过程起作用 |
HtmlWebpackPlugin |
