webpack4系列实践笔记
1.webpack 是什么?
webpack 是目前 javascript 主流的工程自动构建工具,目前 Vue,React 以及 Angular 等项目脚手架都是基于 webpack 进行构建的。
webpack 官方中文文档:www.webpackjs.com/concepts/
webpack 官方英文文档:webpack.js.org/concepts
2.webpack 需要安装的环境
webpack 需要安装的环境有:
- webpack
- webpack-cli
安装的方式有两种:
-
项目本地安装(
npm install webpack webpack-cli
)运行方法:
.\node_modules\.bin\webpack .\index.js 复制代码
-
全局安装(
npm install webpack webpack-cli -g
)运行方法:
webpack .\index.js 复制代码
不理解本地安装和全局安装? 撸一遍npm的文档? www.npmjs.cn/
为了避免每个demo都在本地安装一遍 webpack 和 webpack-cli ,这里推荐使用全局安装的方式。
注意:有一些 webpack plugin 是依赖于 webpack 或 webpack-cli 的,比如 mini-css-extract-plugin, html-webpack-plugin 或 webpack-dev-server 等 ,这种情况需要本地安装 webpack:
npm install webpack
,但编译环境依然可以使用全局 webpack 命令来进行编译打包(前提是你的本地 webpack 和全局的 webpack 版本兼容)。
3.我的webpack版本
webpack: v4.29.5
webpack-cli: 3.2.3
本 webpack4 系列的实践 demo 都是基于此版本进行的
4.关于安装webpack
3.1 首先安装 nodejs ,安装成功后,会自带 npm 管理器
3.2 安装 webpack
npm install -g webpack webpack-cli
复制代码
3.2 查看当前 webpack 版本号
webpack -v
复制代码
5.demo list
demo01: 最简单的 webpack 零配置实践
demo02: 使用 webpack.config.js 配置文件
demo03: webpack 默认支持各种模块化规范
demo04: webpack + babel7
demo05: webpack + typescript
demo06: webpack + babel7 + typescript
demo07: 自动生成 Html 文件
demo08: 关于 SplitChunksPlugin
demo09: 使用 SplitChunksPlugin 分离第三方依赖包以及异步包
demo10: 关于 Tree Shaking
demo11: webpack 处理 css
demo12: webpack 处理 scss
demo13: webpack通过postcss-loader加工css和scss
demo14: mini-css-extract-plugin + SplitChunksPlugin 处理 css 和 scss
demo15: webpack 处理图片
demo16: webpack 处理字体
demo17: demo17 clean-webpack-plugin (清除模式)
demo18: webpack-dev-server (开发模式)
demo19: webpack 开发模式和生产模式
6.源码地址
作者:SimpleXD
链接:https://juejin.im/post/5ce8f81de51d454f73356cbd
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- 机器学习框架ML.NET学习笔记【1】基本概念与系列文章目录
- 智慧城市系列笔记-1
- 机器学习笔记之深度玻尔兹曼机(一)玻尔兹曼机系列整体介绍
- Go分布式爬虫笔记(二十)
- 《数据挖掘:理论与算法》学习笔记(十二)—进化计算
- Linux 计划任务 Crontab 笔记与总结(4)crontab 的日志
- PHP OO 编程笔记
- Dynamic CRM 2013学习笔记 系列汇总
- Deep Learning(深度学习)学习笔记整理系列
- 外设驱动库开发笔记10:SHT2x系列温湿度传感器驱动
- 外设驱动库开发笔记3:AD527x系列数字电位器驱动
- [Oracle]OWI学习笔记--001
- Linux学习笔记-林耐斯Notes-Linux就该这么学
- sql server笔记系列(徐海蔚、桦仔)
- Java全栈系列笔记
- Spring系列笔记(未更完)
- hive 学习笔记 (二)---窗口函数(开窗函数部分)
- Linux下汇编语言学习笔记26 ---