前言：
这篇文章目的是学习如何使用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.1 对图片资源进行优化
将小于某个大小的图片转化成 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
1. module.exports = { 2. presets: ["@babel/preset-env"], 3. };
配置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, // 是否自动打开浏览器 },
