webpack

webpack 打包工具

bundle your scripts/imajes/assets/styles

特点： 模块化和打包

webpack能做什么？

1. 将sass/less等预编译的CSS语言 转化为 浏览器能够识别的 css 文件；
2. 能够将多个文件打包生成一个文件；
3. 能够打包 cripts/imajes/assets/styles 等前端常见的文件；
4. 搭建了开发环境（开启了服务器）；
5. 监视文件变化，能够自动刷新浏览器；
6. 对于vue来说，可以将单文件组件（.vue）转换成浏览器能够识别的内容；

项目打包上线：

• 只需要执行：npm run build就可以对项目进行打包处理
• 所有文件（css/js/html）压缩合并
• 在打包过程中，分离或者合并文件
• 能够通过代码分离功能实现按需加载

weback的使用步骤：

1. 安装：npm i -D webpack webpack-cli
2. webpack的使用两种方式

• 命令行的使用方式
• 配置文件

webpack的四个核心概念：

1. 入口entry
2. 出口 打包后输出内容
3. loaders 加载器：对于非JS的静态资源
4. plugins：插件

演示命令行的使用方式：
webpack入口文件 出口文件路径
最基本的打包： webpack ./src/main.js
打包后生成一个dist目录

注意：

使用webpack的时候应该提供mode，可以是production 或者development

• production 表示：生成模式
• development 表示：开发模式

指定模式：.\node_modules\.bin\webpack ./src/main.js --mode development
指定出口文件：.\node_modules\.bin\webpack ./src/main.js -o /dist/a.js --mode development
dist就会自动生成一个出口文件，a.js

解决去掉\node_modules\.bin\

• 在package.json的scripts中添加一个build脚本
• 将webpack作为一个build脚本的值
• 在终端中执行命令，npm run build来运行创建好的脚本

浏览器或者NodeJS中，都无法直接识别ES6语法，可以经过webpack打包后，就能够识别

webpack打包处理的过程：

1. 运行webpack的打包命令：webpack ./src/main.js --mode development
2. webpack就会找到我们指定的入口文件main.js
3. webpack就会分析main.js中的代码，当遇到 es6语法的时候，webpack就知道，要使用依赖的模块
4. webpack就会将依赖的模块的代码拿过来
5. 然后，继续进行分析，如果遇到ES6语法，继续加载依赖的模块……
6. 知道分析完整个JS文件后，将main.js中所有用到的模块代码 与 自己写的js代码 打包生成一个JS文件，就是/dist/main.js.

webpack配置文件的使用：

1. 在项目根目录中创建一个webpack的配置文件 ：webpack.config.js（不要使用es6模块化语法 import export)
   

开启服务器：

• npm i -D webpack-dev-server
• 开启服务器
• 自动打开浏览器
• 
• 监视文件变化，自动刷新浏览器
• 等

webpack-dev-server使用步骤：

• 安装npm i -D webpack-dev-server
• 在webpack.config.js中配置 devServer配置项
• 在package.json中添加一个配置项：“dev”:" webpack-dev-server"

webpack-dev-server帮我们搭建了开发环境，使用之后，只需要写代码完成功能即可，其他所有的内容，这个插件都帮我们处理了

webpack 和 webpack-dev-server的区别：

• 开发期间使用 webpack-dev-server
• 项目打包上线webpack
• webpack命令会产生 dist文件夹
• webpack-dev-server不会创建dist文件夹，而是将所有的内容放在内存中

html-webpack-plugin

• 根据指定的模板页面在内存生成一个新的页面，并且，浏览器代开的就是生成的页面
• 能够自动引入 css/js文件

使用

• 安装：npm i -D ht
• 在 webpack.config.js中倒入这个模块
• 在plugin中配置

loader

webpack自身只能处理普通的JS文件，而对于，非JS文件，都需要对应的loader来进行特殊的处理，也就是每种类型的文件，都有自己专门的loader来处理；
比如：

• css文件，需要使用style-loader css-loader
• less文件，需要使用style-loader css-loader less-loader
  
  使用步骤：
• 安装：npm i -D style-loader css-loader
• 在webpack.config.js中的module里面配置loader处理规则
  
  

热更新：

webpack自动加载修改的文件到浏览器，并不刷新页面；

处理图片文件： file-loader

file-loader:对图片进行重命名，然后加载图片
使用：

• 安装npm i -D file-loader
• 在webpack.config.js里面的module里添加一个rules；

在file-loader中 ,使用MD5处理后，对于同一张不同名称的图片，只会加载一次，而如果不进行MD5处理，就会加载两次，而这两张图片实际就是同一张图片，实际上加载一次就够了，这样的话，可以达到减少网络请求，加快网站的加载速度。

MD5:消息摘要算法，通常就是32位，对于同一个文件或者字符，不管使用MD5处理过多少次，得到的32位字符串都是相同的；在项目中，一般可以用来进行密码加密处理

处理图片文件： url-loader（推荐使用 ）

使用：

• 安装npm i -D url-loader
• 在webpack.config.js里面的module里添加一个rules；

url—limit:

base64:适合处理小图标，直接内嵌在页面中，减少了请求次数，

处理字体

跟处理图片一样

babel

• babel是 用来将 最新的JS 语法转化为浏览器能够识别的语法；
• 浏览器兼容：让低版本浏览器兼容最新版ES的API ；
  使用：
• npm i -D babel-core babel-loader@7
• npm i -D babel-preset-env
• npm i -D babel-preset-stage

配置：

• 在webpack.config.js里边配置一个loader：
  
• 在项目根目录下创建一个.babelrc的文件：
  

babel的兼容：

• 安装babel-plugin-transform-runtime babel-runtime

处理vue的单文件组件：

• 安装：npm i -D vue-loader vue-template-compiler
• 在webpack.config.js中添加一个rules
• 还需要额外添加一个插件，VueLoaderPlugin
• 创建一个App.vue,以.vue为后缀的单文件组件
• 单文件组件有三个组成部分，template /script/style
• 在main.js入口中导入这个单文件组件
• 在vue实例中，通过render 方法来渲染这个组件