掌握webpack之基本功

webpack基本常识

webpack中文官网：

webpack

webpack本质是什么
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

webpack和gulp对比
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能

webpack与node关系
webpack模块化打包为了正常运行必须依赖node环境；node环境为正常执行许多代码，其中必须包含各种依赖的包；npm工具则负责管理各种包。

webpack基本使用过程

1. webpack安装
全局安装webpack

npm install webpack@3.6.0 -g

局部安装webpack

cd 对应目录
npm install webpack@3.6.0 --save-dev

为什么全局安装后，还需要局部安装呢？
在终端直接执行webpack命令，使用的全局安装的webpack当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack。

2. 文件夹

• dist文件夹
• src文件夹
• package.json
  • 通过npm init生成的，npm包管理的文件

3. 打包
webpack src/main.js dist/bundle.js
将bundle.js在index.html中引入

webpack的配置

webpack.config.js文件：

局部安装webpack

npm install webpack@3.6.0
node_module/.bin/webpack

package.json中定义启动
首先，会寻找本地的node_modules/.bin路径中对应的命令;如果没有找到，会去全局的环境变量中寻找.
打包命令：npm run build

loader是什么

• 出现背景：webpack主要用于处理js代码，以及js之间的依赖关系；webpack对于图片、css等文件等的转化则不支持
• 使用过程：通过npm安装需要使用的loader；在webpack.config.js的modules关键字下进行配置

css-loader使用

npm install css-loader --save-dev
css-loader只负责加载css文件
npm install style-loader --save-dev
style-loader负责将css具体样式嵌入到文档中
webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的

less-loader使用

npm install --save-dev less-loader less

图片文件处理

npm install --save-dev url-loader
limit：作用:当图片小于8kb时，对图片进行base64编码

npm install --save-dev file-loader

limit：大于8kb的图片，会通过file-loader进行处理
name：修改文件名称

• img：文件要打包到的文件夹
• name：获取图片原来的名字，放在该位置
• hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
• ext：使用图片原来的扩展名

ES6语法处理

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015