webpack
1 . webpack 基本概念
什么是 webpack
webpack 是一个 javascript 应用程序的静态模块打包器
- 静态 : 文件资源
- 模块 : node环境, 引入文件, 遵守模块化语法
webpack 的作用
1. 语法转换
- less / scss ===> css
- 高版本语法 ===> 低版本语法
- ES6/7/8 -> ES5
2. 打包 代码压缩 合并
- ES6/7/8 -> ES5
- html/css/js -> 压缩合并
3. 监听代码的变化,自动打包和刷新
4.提取单vue文件里html/css/js
2 . webpack的基本使用
依赖Node环境开发
依赖 npm 或 yarn 等模块管理工具操作
使用步骤 :
-
yarn init -y
或npm init
: 初始化项目,生成 package.json 文件 -
yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
或npm i
: 安装webpack包 ,指定版本,防止以后包更新, 造成项目报错 -
package.json 中配置打包命令
scripts: {
"build": "webpack"
}
- 新建默认配置文件
webpack.config.js
- 运行打包命令
yarn build
或npm run build
3 . webpack 的配置(webpack.config.js
中)
默认入口和出口
-
默认入口 :
src/index.js
-
默认出口 :
dist/main.js
修改默认出入口文件
在 webpack.config.js
文件中填入配置项
注意点 :
- 用
node
语法导入path
模块 - enter 属性 : 可以修改入口文件路径
- output 属性 : 可以修改出口文件路径(包含两个属性
path
和filename
)path
: 出口文件夹路径filename
: 出口文件路径path.join()
: node 语法,用于动态拼接路径__dirname
: node 语法,动态获取文件所在文件夹
业务场景 :
修改入口文件为 src/main.js
,修改出口文件为 dist/index.js
const path = require("path")
module.exports = {
entry: "./src/main.js", // enter: 默认入口
output: {
path: path.join(__dirname, "dist"), // 出口"文件夹"名
filename: "index.js" // 出口"文件"名
}
}
打包后自动生成 html 文件
安装 html-webpack-plugin 插件 ,自动生成 html 文件
- 安装
yarn add html-webpack-plugin@5.3.1 -D
- 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 配置插件
plugins: [new HtmlWebpackPlugin({template: './public/index.html'})]
loader 插件配置
webpack 默认只能处理 js 文件,无法处理其他类型的文件
1 . css-loader 插件 处理 css 文件
- 安装
yarn add css-loader@5.2.1 style-loader@2.0.0 -D
- css-loader 识别.css文件打包
- style-loader 把js内样式插入DOM上
- 配置 loader 规则
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }
2 . less-loader 插件 处理 less 文件
- 安装
yarn add less@4.1.1 less-loader@8.1.0 -D
- 配置 loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
3 . webpack-加载器-处理图片文件
webpack5_asset
module(无需额外包)webpack 内置模块
配置 loader 规则
module: {
rules: [
// ...省略其他
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
}
]
}
注意 :
asset
: 在导出一个 data URI 和一个单独的文件之间自动选择- 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
- 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
4 . webpack4_url-loader 处理字体文件
-
安装
yarn add url-loader file-loader -D
-
配置 loader 规则
{ test: /\.(eot|svg|ttf|woff|woff2)$/, type: 'asset/resource', // 当做静态资源直接复制文件 generator: { filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左 } }
注意点 :
generator
属性 : 生成器, 帮我们自动整理输出到指定位置和指定的文件中- 占位符:
[name]
原文件名, 表示以前叫什么名字现在就原样输出[ext]
原后缀名(包含.), 原来的后缀名, 包括 ., 例如 .eot[hash]
生成 hash 值, 唯一的标识, 避免重名覆盖
5. webpack-高版本js降级
为什么要对高版本 js 语法降级:
-
项目完成无法兼容低版本浏览器
-
在 webpack 中,无法准确的识别一些高版本的 js 语法, 例如:箭头函数
webpack 配合 babel-loader 对高版本js语法降级
- 安装
yarn add babel-loader @babel/core @babel/preset-env -D
- 配置 loader 规则
{
test: /\.js$/, // 匹配 .js 结尾的文件
// exclude:排除 include:包含
// 不降级 node_modules 和 bower_components 目录下的所有文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: { // 加一些额外的配置 (语法预设: 提前准备好的语法包)
presets: ['@babel/preset-env']
}
}
}
4 . webpack 中 mode(模式)
webpack 把打包分成了两种模式, 一种是线上生产环境的模式, 另一种是开发环境的模式
作用 : 区分开发环境和生产环境, 代码是否压缩混淆
取值范围 :
development
开发环境模式, 会对代码进行压缩混淆production
生产环境模式, 不会对代码进行压缩混淆, 速度非常快
module.exports = {
mode: 'production'
}
5 . webpack 开发服务器
问题: 每次修改代码, 重新打包, 非常费时 (30s - 60s)
原因:
-
再次找到入口并开始构建依赖关系图
-
磁盘读取对应文件到内存
-
webpack用配置好的loader和plugin翻译和处理文件
-
再将处理后内容, 写入到磁盘出口位置
-
代码再变化,重复1~4步
作用 : 将打包的结果放到内存中, 只打包修改的部分, 进行热更新, 大大提高了开发效率
webpack 开发服务器使用
- 下包 :
yarn add webpack-dev-server -D
- 配置 : 在 package.json 配置文件中
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
- 开启服务器 yarn serve
webpack 开发服务器优点
- 只重新打包变化的代码
- 打包输出在内存里, 使用更快
- 自动更新到浏览器, 无需手动刷新
6 . webpack 自定义配置
在 webpack.config.js
中可以做一些自定义配置
例:
- 自定义端口号
- 自动打开浏览器
devServer: {
port: 3000, // 端口号
open: true // 自动打开浏览器
},
7 . webpack 打包
执行webpack命令, 根据配置文件, 找到入口分析翻译打包输出到出口位置
-
所有代码都引入到
src/main.js
入口文件内 -
执行 build 打包命令
-
打包整合到
dist/index.js
出口文件内
8 . webpack 注意点
- 只要修改了 webpack 的配置文件, 都需要重新启动开发服务器
- webpack默认只能处理js文件
- 所有要被打包的资源,要和入口产生直接或间接引入关系