Webpack - 自学笔记
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 |
|
