目录
前言：
这篇文章目的是学习如何使用webpack，至于其他的不做过多废话。
Webpack是一个静态资源打包工具。可以将一些文件（如es6语法、sass、less）编译成浏览器认识的代码，从而运行.
1.核心概念介绍
1.entry（入口）
指示 Webpack 从哪个文件开始打包
2.output（输出）
指示 Webpack 打包完的文件输出到哪里去，如何命名等
3.loader（加载器）
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
4.plugins（插件）
扩展 Webpack 的功能
5.mode（模式）
主要由两种模式：
- 开发模式：development
- 生产模式：production
在项目根目录下新建文件：webpack.config.js
//Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
//运行指令 npx webpack
#修改配置文件
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "main.js",
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};2.处理Css资源
Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源
css-loader：负责将 Css 文件编译成 Webpack 能识别的模块style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
2.1 配置css
步骤：先下载后配置
下载：
npm i css-loader style-loader -D配置：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
----------------------配置css start---------------------------------------------
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
----------------------配置css end--------------------------------------------
],
},
plugins: [],
mode: "development",
};2.2 配置less
还是先下载后配置
下载：
npm i less-loader -D配置：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
------------------配置less start-----------------------------------------------
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
------------------配置less end---------------------------------------------
],
},
plugins: [],
mode: "development",
};小结：
以上实例，处理css资源无非先下载然后再配置，使用其他样式插件也是这样配置
3.处理图片资源
过去在 Webpack4 时，我们处理图片资源通过
file-loader和url-loader进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
此时如果查看 dist 目录的话，会发现多了三张图片资源
因为 Webpack 会将所有打包好的资源输出到 dist 目录下
为什么样式资源没有呢？
因为经过 style-loader 的处理，样式资源打包到 入口文件（main.js） 里面去了，所以没有额外输出出来
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
--------------------处理图片资源 start---------------------
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
--------------------处理图片资源 end---------------------
],
},
plugins: [],
mode: "development",
};3.2 对图片资源进行优化
将小于某个大小的图片转化成 data URI 形式（Base64 格式）
注意：图片转base64优点是转为字符串不再发请求，缺点是体积会变大一点点
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
----------------------转base64 start----------------
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
}
----------------------转base64 end----------------
},
],
},
plugins: [],
mode: "development",
};
4.修改输出资源的名称和路径
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
-------------将 js 文件输出到 static/js 目录中 start--------------------
filename: "static/js/main.js",
-------------将 js 文件输出到 static/js 目录中 end--------------------
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
-------------将图片文件输出到 static/imgs 目录中 start--------------------
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
-------------将图片文件输出到 static/imgs 目录中 end--------------------
},
],
},
plugins: [],
mode: "development",
};5.自动清空上次打包资源
clean: true, // 自动将上次打包目录资源清空在配置文件中的位置如图所示：
6.处理字体图标资源
在配置文件中的位置是module中的rules中：
{
test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},7.处理其他资源
开发中可能还存在一些其他资源，如音视频等，我们也一起处理了
注意哈:type: "asset",意思是转base64,这里是type: "asset/resource",意思就是原样输出(不做改变)
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
//就是在处理字体图标资源基础上增加其他文件类型，统一处理即可
},
},8.处理js资源
有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？
原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。
其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。
- 针对 js 兼容性处理，我们使用 Babel 来完成
- 针对代码格式，我们使用 Eslint 来完成
我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理
8.1 Eslint
使用步骤还是先下载后配置
下载：
npm i eslint-webpack-plugin eslint -D配置：(注意要新建文件 ) .eslintrc.js
一般我们都是使用继承，vue或react都有使用。
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};还要在webpack.config.js中配置：
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
module: {
rules: [
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
mode: "development",
};8.2 Babel
JavaScript 编译器。
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
使用步骤：
下载：
npm i babel-loader @babel/core @babel/preset-env -D配置：新建babel.config.js
module.exports = {
presets: ["@babel/preset-env"],
};配置webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},9.处理HTML资源
优点就是自动帮你引入，减少路径错误，省事
还是先下载包：
npm i html-webpack-plugin -D配置：
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
],
},
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
mode: "development",
};10.开发服务器&自动化
这个相信大家都不陌生，平时npm run dev 、serve、start、build之类的命令都是它的功劳。
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化
还是下载和配置
下载：
npm i webpack-dev-server -D配置：
//运行命令：npx webpack serve
// 开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},