前言:
最近闲来无事,想着详细了解一下webpack这个打包工具,于是乎就在哔站上找了下尚硅谷的课程,跟着去搞了一下,所写的这些文章也是自己学习的一些心得,与大家分享,如有不恰当的地方,欢迎大家及时指出,我定会加以改正。前端的更新迭代很快,希望大家要不断学习新的技术来武装自己。
首先我们是来介绍webpack的,那肯定是要先放上webpack的官网地址:webpack中文网
然后,我说了,我使用的尚硅谷教程,下面是课程链接地址:webpack5从入门到精通------webpack4教程
介绍
- 构建工具:我们前端在编写代码时,总是会或多或少的用到一些ES6,less,sass等浏览器无法识别的技术,这个时候,我们就需要借助一些编译工具对代码进行编译,构建工具就是整合了这些编译工具的一个产物。
- webpack打包步骤:
– ① 首先,会找到一个入口文件,以此为起点开始打包
– ② 然后,解析出所需依赖,形成依赖关系图
– ③ 根据依赖关系图把所需资源分别引进来形成chunk(代码块)
– ④ 再对chunk(代码块)进行处理(编译打包),例如:less=>css,js(ES6)=>js
– ⑤ 打包完成以后,输出bundle - 指令
–初始化包-package.json文件:npm init
–安装webpack:npm i webpack webpack-cli
–打包指令:webpack 入口文件路径 -o 出口文件路径 --mode=development/production
–node环境运行:node 文件路径
- 五大核心概念
– Entry:指定入口
– Output:指示打包后的资源bundle输出到哪,以及如何命名
– Loader(翻译官):将非JS文件处理成webpack能识别的文件
– Plugins(插件):可以做一些Loader做不到的事情,eg:打包,压缩,重新定义变量等
– Mode:指定环境,默认有两个:dev,production - webpack.config.js文件基础配置
// resolve用来拼接绝对路径的方法
const {
resolve } = require("path");
module.exports = {
// 入口文件
entry: './src/index.js',
// 出口
output: {
// 输出文件名,这里要注意一定要带后缀
// 入口文件的输出路径可以在这里进行配置:eg: "js/dist.js"
filename: 'dist.js',
// __dirname为nodejs的变量,代表当前文件的绝对路径
// 这是所有文件的输出路径
path: resolve(__dirname, 'build')
},
// loader配置
module: {
rules: [
// 详细的loader配置
]
},
// plugins配置
plugins: [
// 详细的plugins配置
],
// 模式
mode: 'development'
// mode: 'production'
}
- 注意事项:
– 1、webpack能处理js/json文件,不能处理其他文件
– 2、生产环境和开发环境会将ES6模块化转换成浏览器能识别模块化
– 3、生产环境会对打包生成的js文件进行压缩
– 4、打包完成会生成一个唯一的哈希值,可用于对文件的命名
1 处理样式资源
- 所需Loader
– style-loader:创建style标签,将js中的样式资源插入进去,添加到head中生效
– css-loader:主要是把css文件转换成commonjs模块加载到js文件中,内容是一个样式字符串
– less-loader/sass-loader/stylus-loader:将对应的预处理样式文件转换成css文件 - 配置代码
// loader配置
module: {
rules: [
// 详细的loader配置
{
test: /\.css$/,
use: [
// use数组中loader执行顺序,从右到左,从上到下依次执行
// 创建style标签,将js中的样式资源插入进来,添加到head中
'style-loader',
// 将css文件转换成一个commonjs模块,内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件转换成css文件
'less-loader'
]
}
]
},
- 注意:
1:在use中的执行顺序是从右到左,从下到上依次执行
2:预处理的loader使用时还需要下载预处理样式包
3:还要注意版本匹配问题
2 处理图片资源
- 所需loader(webpack4.x)
– url-loader:
------ 只能处理css样式文件中引入的图片资源,无法处理img标签的图片
------ 默认使用ES6模块化进行解析
------ 依赖于file-loader
– file-loader: url-loader依赖于它,它可以用来处理其他资源
– html-loader:
------ 处理html中img标签中引入的图片资源
------ 使用commonjs模块化进行解析 - 配置代码(webpack4.x)
{
test: /\.(jpeg|jpg|png|gif)$/,
// 使用单个loader
loader: 'url-loader',
options: {
// 这个是用来关闭es6模块化解析
esModule: false,
/**
* 图片大小小于8kb,就会被base64处理
* 优点:减少请求数量(减轻服务器负担)
* 缺点:图片体积会增大(文件请求速度更慢)
*/
limit: 8 * 1024,
/**
* 给图片进行重命名
* [hash:10]:取图片的哈希值前十位
* [ext]:取文件原来的扩展名
*/
name: '[hash:10].[ext]'
},
type: 'javascript/auto'//这个属性如果没有设置,则会生成两张图片(如果你的页面只引入了一张图片)
},
{
// 处理html的img标签引入的图片资源
test: /.html$/,
loader: 'html-loader'
}
- 配置代码(webpack5.x已经将url-loader和file-loader内置了)
{
// 处理图片资源
test: /\.(jpeg|jpg|png|gif)$/,
type: 'asset',
parser: {
// 处理小图片,下面是指小于10kb的图片将被转换成base64的格式
dataUrlcondition: {
maxSize: 10 * 1024 // 10kb
}
},
generator: {
filename: "images/[hash:10][ext][query]"
}
}
3 处理其他资源(字体图标、音视频等)
- webpack4.x
– 上面说过了,webpack4.x是使用file-loader来处理其他资源的
{
// 处理其他资源
// exclude是用来排除其他的文件资源
exclude: /.(css|less|js|html|jpeg|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
- webpack5.x
{
// 处理其他资源
test: /\.(ttf|woff2?|mp3|mp4)$/,
type: 'asset/resource',
generator: {
filename: "midia/[hash:10][ext][query]"
}
}
4 自动清空上次打包内容
- 原理:在打包前将output.path整个目录内容清空,再进行打包
- webpack4.x:需要借助clear-webpack-plugin
- webpack5.x:只需要output.clean = true 即可
output: {
// 输出文件名,这里要注意一定要带后缀
filename: 'dist.js',
// __dirname为nodejs的变量,代表当前文件的绝对路径
path: resolve(__dirname, 'build'),
// 自动清空上次打包内容
clean: true
}
5 处理html资源
- 所需Plugins
– html-webpack-plugin
------ 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源
------ 需求:一个有结构的HTML文件
------ 注意:loader只需要加载,然后直接使用,而Plugins需要加载,引入再去使用 - 配置代码
– 下载指令:npm i html-webpack-plugin
– 引入插件:const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
– 使用插件:
plugins: [
// 详细的plugins配置
// 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源
// 需求:一个有结构的HTML文件
new HtmlWebpackPlugin({
// 复制'./src/index.html'文件,自动引入打包输出的所有资源(css/js)
template: './src/index.html'
})
]
6 eslint语法检查
6.1 webpack4.x
- 所需第三方库和loader
– eslint:Eslint中文网
– eslint-loader
– eslint-config-airbnb-base/eslint-config-airbnb:这是npm上的一个比较成熟的js规范库
– eslint-plugin-import:上面的库依赖于此 - 代码配置
{
test: /$\.js/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复
fix: true
}
}
- 注意事项:
– [email protected]版本用的是eslint-loader
– [email protected]版本是在package.json文件中添加"eslintConfig": {}配置
– eslint-config-airbnb包含react.js的一一些插件,eslint-config-airbnb-base不包含
– airbnb规范的路径,github官网->Open Source ->Repositories-Topics->javascript->airbnb - package.json文件代码增加
"eslintConfig": {
"extends": "airbnb-base"
}
6.2 webpack5.x
- 所需第三方库和loader
– eslint:Eslint中文网
– eslint-webpack-plugin - 代码配置
plugins: [
// 我这是webpack5的写法,插件要引用
new EslintWebpackPlugin({
// 这里是因为我把resolve解构出来了
context: resolve(__dirname, 'src'),
fix: true
})
],
"eslintConfig": {
"extends": "airbnb-base"
}
- .eslintrc.js
module.exports = {
// 解析选项
parserOptions: {
// js版本
esmaVersion: 6,
sourceType: "module"
},
env: {
node: true, // 启用node全局变量
browser: true // 启用浏览器中全局变量
},
// 具体检查规则,优先于我们继承的规则
rules: {
"no-var": 2
},
extends: "eslint:recommended"
}
- 注意事项:
– [email protected]版本用的是eslint-webpack-plugin
– [email protected]版本我这里是在.eslintrc.js中进行相关配置,有很多种写法,可以参考官网
7 devServer
- webpack4.x
// 与五大核心同级
devServer:{
// 项目构建后的路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
- webpack5.x
// 与五大核心同级
devServer:{
// 启动服务器域名
host: localhost
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
写在最后
创作不易
大家转载时劳烦注一下出处
雲墨·款哥,进阶的程序猿,永远在路上