Webpack - 自学笔记

时间：2019-01-27 19:57:20 阅读：175 评论：0 收藏：0 [点我收藏+]

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

原文：https://www.cnblogs.com/jason-beijing/p/10327419.html

踩

(0)

评论一句话评论（0）

分享档案

更多>