前言：

最近闲来无事，想着详细了解一下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)$/,// 使用单个loaderloader: '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}
}

• 注意事项：
  – webpack@4.x版本用的是eslint-loader
  – webpack@4.x版本是在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"
}

• 注意事项：
  – webpack@4.x版本用的是eslint-webpack-plugin
  – webpack@5.x版本我这里是在.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
}

写在最后

创作不易
大家转载时劳烦注一下出处
雲墨·款哥，进阶的程序猿，永远在路上