webpack系列一：基础配置
前言：
最近闲来无事，想着详细了解一下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
}
写在最后
创作不易
大家转载时劳烦注一下出处
雲墨·款哥，进阶的程序猿，永远在路上