/webpack-study

webpack教程,从第一步开始。萌新也可以阅读

Primary LanguageJavaScript

程序员技术交流、面试、职场、生活、游戏、相亲,综合讨论QQ群:387017550,群内经常发红包,欢迎加入

核心竞争力:每周一次免费面试,在YY频道直播,可旁听,有往期录音

0、前注

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

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

成文时,webpack版本是【3.8.1】

交流QQ群:387017550

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-loaderurl-loader 不能转换 base64字符串 的文件,被这个处理(主要用于设置打包后图片路径,以及CDN等);
  8. html-withimg-loader:用于加载html模板;

6、开发环境

7、HMR 模块热加载

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

【实战2】打包一个bootstrap项目(打包文件带hash)

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

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

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