webpack4系列实践笔记-白红宇

1.webpack 是什么？

webpack 是目前 javascript 主流的工程自动构建工具，目前 Vue，React 以及 Angular 等项目脚手架都是基于 webpack 进行构建的。

webpack 官方中文文档：

webpack 官方英文文档：

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的文档?

为了避免每个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 首先安装 ,安装成功后，会自带管理器

3.2 安装 webpack

npm install -g webpack webpack-cli复制代码

3.2 查看当前 webpack 版本号

webpack -v复制代码

5.demo list

demo01:

demo02:

demo03:

demo04:

demo05:

demo06:

demo07:

demo08:

demo09:

demo10:

demo11:

demo12:

demo13:

demo14:

demo15:

demo16:

demo17:

demo18:

demo19:

6.源码地址

7.关于作者

GitHub:

个人博客:

个人线上简历:

Email: 248200851@qq.com