认识webpack
什么是webpack
webpack是一个前端的模块化打包(构建)的工具
功能：
- 1.打包(构建)
- 2.模块化
特点
webpack将一切繁杂的、重复的、机械的工作自动处理，开发者只需要关注于功能的实现的
打包(构建)
- 1.语法转换
ES6--->ES5 供浏览器的解析
less/sass---->css 供浏览器的解析
TS------> ES5 供浏览器的解析
- 2.文件压缩和合并
js / html /css 文件压缩，删除所有的注释和空格，变量名简写
js / css 文件合并 ，将多个js文件或则css文件合并成一个js文件或则css文件
- 3.提供开发期间的服务器
能够自动打开浏览器，监听文件变化，自动刷新浏览器的
模块化
在webpack中，所有的资源都是模块
webpack 为前端提供了模块化开发环境，有了webpack之后，我们可以像写 NodeJS 代码一样，写前端代码。
引入 js/css/图片 文件：
const Vue = require('vue')
require('./css/index.css')
require('./imgs/a.png')
每个js文件都是一个独立的模块，模块之间的作用域是隔离的，需要通过导入和导出 来实现两个模块之前的数据共享
webpack 能够识别现在前端所有的模块化语法，也就是说：不管你用的
require.js（AMD）、NodeJS（CommonJS）、ES6（import/export） 哪种语法，webpack全都认识，全都可以解析
webpack 不仅实现 JS 的模块化，也实现了 CSS、图片、视频 等所有前端资源，全部都可以使用模块化的方式来处理。
// CSS：
@import './common/base.css';
// CSS:
background-img: url(./imgs/a.png);
// HTML:
<img src="./imgs/a.png" />
注意点：
webpack 自身没有提供新的模块化语法，但是，它能够处理所有的前端模块化语法
使用webpack
初始化package.json
1 创建一个文件夹：
webpack-basic2 通过
npm init -y初始化一个package.json文件3 安装webpack：
npm i -D webpack webpack-cli4 在
package.json文件中的scripts配置项中，添加一个脚本命令
build 表示构建、打包
webpack 入口文件路径 --output 出口文件路径
"scripts": {
"build": "webpack ./src/js/main.js --output ./dist/bundle.js"
},
- 5 在终端中，通过
npm run build来执行上面配置好的 build 命令 - 最终，打包好的内容就会放在
dist/bundle.js目录中
实现依赖项加载的原理：
采用的是递归的查询的方式，查找依赖项，找完所有的依赖项，然后将依赖项全部打包合并到一个文件中
打包执行的过程
问题
1.为什么 webpack 打包后，就可以在浏览器中运行了？？？
答：webpack 能够识别和处理所有的 模块化 语法，能够将这些模块化语法，转化为浏览器能够执行的代码
webpack中的两个环境
(开发环境)development
作用
开发期间的环境，在项目没有上线之前使用，代码不会压缩
配置
"build"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"
特点
打包的文件是未压缩的
(生产环境)production
作用
项目上线的时候使用，将代码打包压缩
配置
"pro"："webpack ./src/js/main.js --output ./dist/bundle.js --mode production"
特点
打包的文件是压缩的
使用的场景
开发期间 npm run build
上线时 npm run pro
webpack命令行的简写
简写语法
"build"："webpack 入口文件路径 --mode 模式"
实例
"build"："webpack ./src/js/main.js --mode development"
"pro"："webpack ./src/js/main.js --mode production"
使用的命令
开发期间 命令：npm run build
上线打包 命令：npm run pro
注意点
简写模式中没有指定出口路径，服务器会默认在根目录下创建一个dist目录，存放的文件名称，和入口问文件名相同
webpack的配置文件的使用
什么叫配置文件
功能
这个文件将所有的配置项导出，webpack会读取这个配置文件，根据配置文件中的配置项，执行相应的操作
使用的步骤
- 1.在项目的根目录下创建一个webpack.config.js文件
- 2.在webpack.config.js中配置参数
- 3.完成基本配置后，到package.json文件中修改build的参数值
- 4.在终端中输入命令：npm run build
webpack.config.js的基本配置项
- 1.入口文件
entry：path.join(__dirname,"./src/js/main.js") - 2.出口文件
output:{
path:path.join(__dirname,"./src/js/main.js"),
filename:"bundle.js"
} - 3.使用的模式
mode:"development"
在package.json配置文件中
"build"："webpack"
使用的命令
npm run build
webpack-dev-server
使用的步骤
- 1.安装 npm i -D webpack-dev-server
- 2.使用webpack-dev-server
命令行的方式
配置文件的方式 - 3.在终端中输入命令：npm run dev
webpack-dev-server命令行的使用
作用
提供了开发期间的运行服务器的环境
在package.json配置项
"dev"："webpack-dev-server --open --contentBase ./src --port 3000 --hot"
配置项说明
--open
打开浏览器
--contentBase
默认打开的目录
--port
打开的端口号
--hot
热更新
使用的命令
npm run dev
webpack-dev-server的配置文件的使用
**作用**
提供了开发期间的运行服务器的环境
使用的步骤 -webpack.config.js配置文件的配置项
配置项说明
devServer
dev-server配置
open
自动打开浏览器
contentBase
默认打开的目录
port
打开的端口号
hot
热更新
使用的命令
npm run dev
webpack-dev-server 做了什么？
1.在项目的根目录开启了一个新的服务器，这个新的服务器的地址为：
http://localhsot：8080/2.自动打开浏览器
3.打开指定的目录下的index.html
4.能够修改默认的端口号
5.热更新
6.自动监视文件的变化，自动刷新浏览器
配置项功能详细描述
webpack和webpack-dev-server的区别
- wepack
它是项目打包上线时使用的，能够将打包压缩好的文件保存到dist文件夹中，输出保存到磁盘中 - webpack-dev-server
它提供了开发期间的服务器的环境，也能够对项目进行打包，但是不压缩代码，将打包好的文件缓存到服务器的根目录，但是不会存储到磁盘中，可以通过服务器直接读取并使用
注意点
缓存的打包的文件和入口的文件名相同
应用场景
开发期间使用webpack-dev-server，上线打包使用webpack
html-webpack-plugin插件的使用
作用
- 1.根据指定的模板，在内存中生成一个页面
- 2.在这个页面中自动引入了js/css/img/..等文件，然后在内存中将页面重构，最终渲染在浏览器的是渲染完成页面
为什么能够自动引入js/css等文件？
首先在配置项中设置了模板文件，webpack默认可以处理js的引入的，所以讲所有的引入和依赖项全都写在了main.js中，当webpack，使用模块化引入，就可以将js/css/image等文件全部打包放在了一起，然后webpack默认的又引入了这个js文件，所以到了不需要手动引入
html-webpack-plugin使用的步骤
1.下载安装
1-1 安装： npm i -D html-webpack-plugin
1-2.引入使用2.webpack-config.js配置项
2-1引入模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
2-2在plugin属性中指定插件
new HtmlWebpackPlugin
template:path.join(__dirname,"./src/js/index.html")
)
2-3配置项的说明
new HtmlWebpackplugin
添加插件的实例
template
指定的模板文件
特点1.如果使用了html-webpack-plugin这个插件，在处dev-server配置中，可以省略contentBase这个选项
2.使用了这个插件，不用在模板的html中使用sript等方式引入js/css等文件
loader的使用
打包处理非静态资源
webpack.config.js的配置项
module{
rules:[
{test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’, ...] },
{test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’, ...] },
]
}
非静态资源注意点
- 1.use的执行顺序
默认是从右往左执行的，例如['style-loader','css-loader'],会先执行css-loader，然后将结果给style-loader处理。
webpack处理静态文件（例如css）的过程
- 1.webpack会处理main.js入口文件
- 2.执行到require('index.css'),会使用引入模块方式引入文件
- 3.webpack会到webpack.config.js中，找到module中的rules这一属性，然后通过text中的正则匹配文件
- 4.找到这个文件会按照use中的loader方式处理文件
- 5.处理完成后，这个文件就生效了
css-loader
css-loader 使用的步骤
- 1.下载安装
npm i -D style-loader css-loader
- 2.在 webpack.config.js 中，添加配置项来打包处理 CSS 文件
正则的匹配项
/\.css$/
使用的loader
['style-loader','css-loader']
配置项
{test:'/\.css/',use:['style-loader','css-loader']}
loader的说明
css-loader
读取css文件的内容，然后将读取的内容转化为一个模块
style-loader
读取css-loader的模块，在html的head标签中，创建一个style标签，然后将模块的内容放到这个style标签中
less-loader
正则的匹配项
/\.less$/
使用的loader
['style-loader','css-loader','less-loader']
配置项
{test:'/\.css/',use:['style-loader','css-loader','less-loader']}
loader的说明
less-loader
将less的内容转成编译后的css文件内容
url-loader/file-loader
url-loader
正则的匹配项
/\.(jpg|jpeg|png|gif)$/
使用的loader
'url-loader'
配置项
{
test:/\.(jpg|jpeg|png|gif)$/
use:{
loader: 'url-loader',
options:{
limit:8106
}
}
}
配置项的说明
loader
使用的模块
options
配置规则
limit字节数
file-loader
配置项
{test:/\.(png|jpg|jpeg|gif)$/,use:"file-loader"}
file-loader注意点
- 使用url-loader，一定要安装file-loader，因为url-loader依赖于file-loader，不一定要写在loader中，会自动引入
- 使用url-loader，会默认将图片转成base64格式的字节码
- 使用file-loader，会对文件名重命名
两个问题
- 为什么要将图片转成base64格式的
将文件转成base.64格式的数据能够将不同类型的格式的数据，嵌入到js文件中，打包的时候，能够将引入的图片放到js中。
- 为什么file-loade会对文件重名
使用了MD5的特征码提取，一个文件只要内容没有发生改变，MD5的特征码始终唯一且不会改变
- base64和MD5的应用场景
一般用于小图片的转换，如果一个图片文件过于庞大，无异于增加了js的大小
MD5适用于一个页面多次用到相同的图片，可能名称不同，但只需要发送一次请求图片。
细节补充
- 未设置mode时，打包的警告
mode 配置项没有指定， webpack 默认将 mode 设置为 production
打包字体
配置项
{test：‘/\.(eot|svg|ttf|woff|woff2|otf)$/’,use('url-loader')}
打包字体使用的步骤
- 1 安装： npm i -D url-loader file-loader
- 2 在 webpack.config.js 中添加规则
字体图标的使用：
1 导入 字体图标 库的样式
2 在 index.html 页面中，给元素添加 字体图标 提供的样式名称
处理ES6以及其他的js语法
使用的背景条件
默认情况下，只能打包处理 JS 这一类的静态资源
babel的作用
- 1 将 ES6 语法转化为 ES5 的语法
- 2 实现浏览器兼容
babel的使用步骤
- 1.安装
- 2 在 webpack.config.js 中添加 打包JS 文件规则
- 3 在项目根目录中创建一个 babel 配置文件： .babelrc
补充说明
babel-preset-env 表示用来解析所有的标准JS语法，包括了： ES2015/ES2016/ES2017/ES2018...
不标准但是经常会使用的语法，此时，推荐使用babel-preset-stage-2 这个包，来处理
安装： npm i -D babel-preset-stage-2
JS语法提案，需要经过 5 个阶段，才会被采纳为正式标准
