webin / webpack-study Goto Github PK

0、前注

本文内容源于webpack中文文档，以及我自己实践中写的若干DEMO。

每个DEMO以文件夹为单位，从入门到进阶，根据文件夹编号为准，逐步递进。

成文时，webpack版本是【3.8.1】

0.1、安装webpack

首先你需要安装Node.js，点击打开Node.js下载页面。安装完Node.js后，会自带npm包管理器。

npm install webpack -g

这个命令将安装最新版本的webpack（全局，学习教程中推荐，避免多次安装。但实践中还是有必要一个项目一个webpack，避免版本冲突带来的bug）

目前版本是3.8.1（2017/11/27）

webpack -v

查看当前webpack版本

执行命令：

以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。

快速抵达对应目录的控制台（win）：

在对应目录下，按住 shift，然后点击鼠标右键，在弹窗里选择在此处打开命令窗口即可启用

MAC 快速打开某个目录的终端：

参考这个链接

0.2、命令执行

安装（fork项目后，第一次运行每个项目之前，都需要执行一遍）

npm install

执行（不同项目，执行的命令可能不同，参照每个项目的文档，或者 package.json 里的 scripts 里的值）

// 一般使用（没有特殊要求，表示这个只是为了熟悉功能）
npm run test

// 开发环境使用（从 7、HMR 一节开始添加，）
npm run dev

// 生产环境使用（一般用于实战项目，或该项目同时有开发和生产两个版本的webpack配置）
npm run build

0.3、webpack的版本

当我们全局安装webpack之后，package.json 里也会有webpack，这两个webpack的版本，可能是不一样的。

那么当我们打包的时候，如何确认当前使用的是哪一个webpack版本呢？

使用全局的webpack的版本

通过直接执行 webpack 命令，将使用全局的 webpack 版本

webpack

使用当前项目的webpack版本

当我们通过 npm 命令来执行时，将使用当前项目的 webpack 版本。

例如：

npm run build

就将使用 node_modules 里面的 webpack 的版本。

0.4、快捷链接，点击快速抵达对应项目目录

1、最简单的webpack实例

2、简单指令（npm脚本）

3、入口（多入口）

4、出口

5、Loader

1. babel-loader：用于将es6、es7等语法，转换为es5语法；
2. css-loader：用于处理css文件（主要是处理图片的url）；
3. style-loader：将转换后的css文件以 style 标签形式插入 html 中；
4. postcss-loader：一般用于添加兼容性属性前缀；
5. less-loader：以 less 语法来写 css ；
6. url-loader：用于将图片小于一定大小的文件，转为 base64 字符串；
7. file-loader：url-loader 不能转换 base64字符串 的文件，被这个处理（主要用于设置打包后图片路径，以及CDN等）；
8. html-withimg-loader：用于加载html模板；

6、开发环境

7、HMR 模块热加载

【实战１】打包一个CDN引入的jQuery项目

【实战２】打包一个bootstrap项目（打包文件带hash）

【实战３】打包有es6、es7语法的js代码

【实战４】打包带异步加载功能的模块

【实战５】打包一个具有常见功能的多页项目