Document

# 前言本篇是 webpack5 基础篇教程，意在用尽可能简介明了的描述，帮助初学者学习，二来给老手复习，三来自己巩固知识！话不多说，直接开干！说明： `webpack：^5.75.0` `webpack-cli：^5.0.1` # 1、基本配置在开始使用 `Webpack` 之前，我们需要对 `Webpack` 的配置有一定的认识 ## 1.1、webpack 5大核心 1. entry(入口) `entry`是 webpack 打包的入口，即指示 webpack 从哪里开始打包 3. ouput(出口) `output`是指示 webpack 将打包好的文件输出到哪里去，如何命名等 4. loader(加载器) `webpack 本身只能处理 js、json`，对于图片、字体等资源，webpack 需要借助 loader 进行解析 5. plugin(插件) `plugin`扩展 Webpack 的功能 6. mode(模式) `mode`指示 webpack 使用哪种模式，有两种 - `development(开发模式)` - `production(生产模式)` # 2、项目初始化 ## 2.1、安装 webpack 1. 创建 learn_webpack5 文件夹，创建子文件夹 src，打开 vscode 终端，输入以下命令 > npm init -y > > npm i webpack webpack-cli -D 会生成如下文件： ![1674041893364.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c43f07e40e741478b25b42256e429a2~tplv-k3u1fbpfcp-watermark.image?) 2. src 文件夹下创建 a.js、b.js、index.js 文件 ```js //src/a.js export function printA() { console.log('a') } ``` ```js //src/b.js export function printB() { console.log('b') } ``` ```js //src/index.js import { printA } from "./a"; import { printB } from "./b"; function print() { printA() printB() } print() ``` 3. 在根目录下，创建 public/index.html 并初始化 ```html Document ``` ## 2.2、编写 webpack 基本配置在根目录下，创建webpack/webpack.common.js，并编写如下基本配置： ```js //webpack/webpack.common.js const path = require('path') module.exports = { //打包的入口配置 //相对路径和绝对路径都行 entry: path.resolve(__dirname, "../src/index.js"), //打包文件的出口配置 output: { // path: 文件输出目录，必须是绝对路径 // path.resolve()方法返回一个绝对路径 // __dirname 当前文件的文件夹绝对路径 path: path.resolve(__dirname, '../dist'), //输出的文件名 filename: 'bundle.js', //webpack5 版本中，自动清除上一次打包的结果 clean: true }, //加载器配置 module: { rules: [ ] }, //插件配置 plugins: [], //模式配置 mode: 'development' } ``` ## 2.3、配置 package.json 脚本命令打开 package.json，添加下面的命令： ```js "scripts": { "build": "webpack --config ./webpack/webpack.common.js", }, ``` 在 vscode 终端运行 npm run build，整体目录如下： ![1674106670717.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a1aef1baca24bf8b3c1f1044c33f184~tplv-k3u1fbpfcp-watermark.image?) # 3、处理 HTML 资源 `html-webpack-plugin` 会生成一个HTML5文件，**在 body 中使用 scrip t标签引 webpack 生成的 bundle.js** （1）下载 html-webpack-plugin ```js npm i html-webpack-plugin -D ``` （2）在 plugins 中配置 html-webpack-plugin ```js const HtmlWebpackPlugin = require module.exports = { //前面的代码... plugins: [ new HtmlWebpackPlugin({ //输出的路径 template: path.resolve(__dirname, '../public/index.html'), //输出的文件名 filename: 'index.html' }) ] } ``` （3）再次执行 npm run build ![1674107074417.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d816ff4d4494db89a1427b9ac26d32a~tplv-k3u1fbpfcp-watermark.image?) （4）打开 dist/index.html，右键，选择运行在浏览器中： f12 打开 network，发现我们打包后的资源都下载下来了 ![1674107195918.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ebc778140d3440bad92cb2142d3cb03~tplv-k3u1fbpfcp-watermark.image?) 打开控制台，发现打印了 a b ![1674107263887.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f341a9257fba4a8f844186c42cc2999d~tplv-k3u1fbpfcp-watermark.image?) 这样我们打包后的 bundle.js 就可以直观的运行在页面上了。 # 4、处理样式资源本章节我们学习使用 Webpack 如何处理 `Css、Less、Sass、Scss、Styl` 样式资源 `Webpack 本身是不能识别样式资源的`，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 ## 4.1、处理 CSS 样式（1）下载 `css-loader、style-loader` ```js npm i css-loader style-loader -D ``` - css-loader：帮助 webpack 解析 css，包括 @import 和 url() - style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容（2）配置 ```js // webpack/webpack.common.js module.exports = { //前面的代码... module: { rules: [ { test: /\.css$/, //匹配以 css 结尾的文件 use: ["style-loader", "css-loader"], //从右向左解析 }, ] }, //后面的代码... } ``` （3）创建 src/styles/a.css，写入样式 ```css body{ background-color: aqua; } ``` 在 src/index.js 中引入 a.css ```js import './styles/a.css' ``` （4）执行 npm run build 后，重新在浏览器运行 dist/index.html，发现样式已经生效 ![1674107918775.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/762e41f12bd1407880b7b9d3e7719cf1~tplv-k3u1fbpfcp-watermark.image?) ## 4.2、处理 Less 样式（1）下载 `less-loader` ```js npm i less-loader -D ``` - less-loader：负责将 Less 文件编译成 Css 文件（2）配置 ```js // webpack/webpack.common.js module.exports = { //前面的代码... module: { rules: [ { test: /\.css$/, //匹配以 css 结尾的文件 use: ["style-loader", "css-loader"], //从右向左解析 }, { test: /\.less$/, //匹配以 less 结尾的文件 use: ["style-loader", "css-loader", "less-loader"], //从右向左解析 }, ] }, //后面的代码... } ``` （3）创建 src/styles/b.less，写入样式 ```less div{ width: 200px; height: 200px; background-color: red; span{ color: white; } } ``` （4）打开 public/index.html，添加一个 div 和 span ```html Document

123

``` （5）打开 src/index.js，引入 b.less ```js import './styles/b.less'; ``` （6）执行 npm run build 后，页面如下： ![1674108621228.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9001f5cff57546e4bd2e972cd36a6a21~tplv-k3u1fbpfcp-watermark.image?) ## 4.3、处理 Sass、Scss 样式（1）下载 `sass-loader、sass` ```js npm i sass-loader sass -D ``` （2）配置 ```js // webpack/webpack.common.js module.exports = { //前面的代码... module: { rules: [ { test: /\.css$/, //匹配以 css 结尾的文件 use: ["style-loader", "css-loader"], //从右向左解析 }, { test: /\.less$/, //匹配以 less 结尾的文件 use: ["style-loader", "css-loader", "less-loader"], }, { test: /.s[ac]ss$/,//匹配以 sass、scss 结尾的文件 use: ["style-loader", "css-loader", "sass-loader"], }, ] }, //后面的代码... } ``` （3）创建 src/styles/c.scss，写入样式： ```scss $blue: blue; .box2{ width: 300px; height: 300px; background-color: $blue; } ``` （4）打开 public/index.html，添加一个 div.box2 ```html Document

123

``` （5）打开 src/index.js，引入 c.scss ```js import './styles/c.scss'; ``` （6）执行 npm run build，页面如下： ![1674109113387.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b51b9cc414c74ea6b47f633501f04faa~tplv-k3u1fbpfcp-watermark.image?) ## 4.4、抽取 CSS 到单独的文件我们发现上面的打包结果，head 标签中有 3 个 style 标签，如果在 src/index.js 里面引入的样式资源越多，则打包后的 style 标签就越多，这个时候我们希望把所有的 CSS 都提取到一个单独的文件中，减少 DOM 的操作，我们需要使用 `mini-css-extract-plugin` （1）下载 `mini-css-extract-plugin` ```js npm i mini-css-extract-plugin -D ``` （2）配置 ```js // webpack/webpack.common.js module.exports = { //前面的代码... module: { rules: [ { test: /\.css$/, //将 style-loader 换成 MiniCssExtractPlugin.loader use: [MiniCssExtractPlugin.loader, "css-loader"], }, { test: /\.less$/, //匹配以 less 结尾的文件 use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], }, { test: /\.s[ac]ss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, ] }, plugins: [ //前面的代码... // 提取css成单独文件 new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: "asset/css/main.css", }), ] } ``` （3）执行 npm run build ![1674109797652.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f3659377e484e5cbe73528b167a1dcc~tplv-k3u1fbpfcp-watermark.image?) （4）页面运行结果如下： ![1674109877828.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc500a46875e42688bbee44c6a0e0088~tplv-k3u1fbpfcp-watermark.image?) ![1674109910477.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d59b66234e784083866c89dddc87e2aa~tplv-k3u1fbpfcp-watermark.image?) ## 4.5、兼容性处理某些样式可能并不兼容低版本浏览器，所以需要对 css 进行兼容性处理（1）下载 `postcss-loader postcss postcss-preset-env` ```js npm i postcss-loader postcss postcss-preset-env -D ``` （2）配置 ```js // 由于需要对 css、less、sass 都进行兼容性处理，所以我们先合并一下样式的配置 const getStyleLoaders = (preProcessor) => { return [ MiniCssExtractPlugin.loader, "css-loader", //在 css-loader 后，配置 postcss-loader { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", // 能解决大多数样式兼容性问题 ], }, }, }, preProcessor, ].filter(Boolean); }; module.exports = { module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: getStyleLoaders(), }, { test: /.less$/, use: getStyleLoaders("less-loader"), }, { test: /.s[ac]ss$/, use: getStyleLoaders("sass-loader"), } ] } } ``` （3）在 package.json 新增 browserslist 配置 ```js "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, ``` （4）在 src/styles/b.less 中添加样式 ```less div{ width: 200px; height: 200px; background-color: red; span{ color: white; transform: rotate(45deg); /* 这个属性会产生浏览器内核前缀如 -webkit*/ } } ``` （5）执行 npm run build，查看 dist/assets/css/main.cs ![1674110644783.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4bef94e6a36455c9c24b20f9baaa25f~tplv-k3u1fbpfcp-watermark.image?) ## 4.6、压缩 CSS 打包后的文件体积越小，浏览器加载资源的速度就越快，当项目很大时，压缩文件体积是非常有必要的，接下来我们压缩打包后 CSS 文件的体积（1）下载 `css-minimizer-webpack-plugin` ```js npm i css-minimizer-webpack-plugin -D ``` （2）配置 ```js //webpack/webpack.common.js const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { //前面的代码... plugins: [ // css压缩 new CssMinimizerPlugin(), ] } ``` （3）执行 npm run build，发现 dist/assets/css/main.css 的代码被压缩了 ![1674110954855.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b93297c0e6848e8b42d45a7c912a895~tplv-k3u1fbpfcp-watermark.image?) # 5、处理图片资源过去在 Webpack4 时，我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源（1）配置 ```js module.exports = { module: { rules: [ //前面的代码 { test: /\.(png|jpe?g|gif|webp)$/, type: "asset", parser: { dataUrlCondition: { // 小于10kb的图片会被base64处理 // 优点：减少请求数量 // 缺点：体积更大 maxSize: 10 * 1024 } }, generator: { // 将图片文件输出到 asset/imgs 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "asset/imgs/[hash:8][ext][query]", }, }, ] } } ``` （2）添加图片创建 src/assets/img 文件夹，在该文件夹下添加三张图片（素材自己随便找）如下： ![1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8687416608bd43ad92d9b8452abbc913~tplv-k3u1fbpfcp-watermark.image?) （3）使用图片首先，我们先在 src/public/index.html 中添加两个 div ![1676175372832.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6513806cd05c4cbb9adcf87f94c0b77c~tplv-k3u1fbpfcp-watermark.image?) 然后，在 src/styles/b.less 中，写入下面的样式： ```less div{ width: 200px; height: 200px; } .box2{ background-image: url("../asset/img/1.jpeg"); background-size: cover; } .box3{ background-image: url("../asset/img/2.png"); background-size: cover; } .box4{ background-image: url("../asset/img/3.gif"); background-size: cover; } ``` 最后，执行打包命令 `npm run build`，观察结果首先，图片资源被打包到了 `dist/asset/imgs` 目录中，并且只有两张图片，分别是 `2.png 和 3.gif` 打包后的输出 ![1676175907673.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34139629ac5848dca36b1412a1eea60b~tplv-k3u1fbpfcp-watermark.image?) 而 1.jpeg 没有，是因为 1.jpeg 小于10kb的图片，所以被处理为了 base64 格式打开页面，我们发现 ![1676176142361.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4cb823aba444c69a2125b3f9e406bc3~tplv-k3u1fbpfcp-watermark.image?) ![1676176196535.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4870bcc95fb14a4f8f30d0b7ba0671d9~tplv-k3u1fbpfcp-watermark.image?) 至此，我们完成了对图片资源的处理。 # 6、处理字体图标资源子图图标资源的处理和图片资源的处理方式类似，这里直接上配置，不再赘述（1）配置 ```js module.exports = { module: { rules: [ { test: /\.(ttf|woff2?)$/, type: "asset/resource", generator: { // 将字体图标文件输出到 asset/fonts 目录中 // 将字体图标命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "asset/fonts/[hash:8][ext][query]", }, }, ] } } ``` （2）在[阿里巴巴矢量库](https://www.iconfont.cn/)，选择想要的图标添加到购物车，统一下载到本地（不会的同学可以百度，这里不过多赘述）（3）将 `iconfont.ttf、 iconfont.woff、 iconfont.woff2 ` 添加到 src/asset/fonts，将 `iconfont.css` 添加到 src/asset/styles ![1676176751774.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c2da92db6ea49c39676919140ff81f3~tplv-k3u1fbpfcp-watermark.image?) （4）使用字体图标，在 src/index.js 中引入字体图标 ```js //src/index.js import './styles/iconfont.css' ``` （5）在 src/public/index.html 中，使用字体图标 ```html ``` （6）执行 `npm run build`，打开页面 ![1676177615447.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec49bff653bf4a61b98016ded33fd460~tplv-k3u1fbpfcp-watermark.image?) 至此，图标字体资源的处理完毕 # 7、处理其他资源开发中可能还存在一些其他资源，如音视频等，我们也一起处理了 ```js module.exports = { module: { rules: [ { test: /\.(map4|map3|avi)$/, type: "asset/resource", generator: { filename: "asset/media/[hash:8][ext][query]", }, }, ] } } ``` # 8、处理 JS 资源 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理，我们使用 Babel 来完成（1）下载相关的包 `npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -D` 其中： `@babel/core`：babel核心库 `babel-loader`：处理 JS 的插件 `@babel/preset-env`：将 ES6 向后兼容 `@babel/plugin-transform-runtime`：处理 async，await、import() 等语法关键字的帮助函数（2）根目录下，创建 babel.config.js 文件 ```js module.exports = { presets: ["@babel/preset-env"], }; ``` （3）webpack.common.js中配置 ```js module.exports = { module: { rules: [ { test: /(\.jsx|\.js)$/, exclude: /node_modules/, // 排除node_modules代码不编译 loader: "babel-loader", }, ] } } ``` （4）在 src/public/index.html 中 ```html ``` （5）执行 `npm run build`，打开页面，点击按钮后，窗口控制台的输出结果 ![1676179897345.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45879829d9c14294844acd2a6b189ab8~tplv-k3u1fbpfcp-watermark.image?) # 9、区分环境实际开发中，我们一般将 webpack 配置分为 `webpack.common.js(公共配置)、webpack.config.dev.js (开发环境) 和 webpack.config.prod.js (生产环境)`，将配置的代码合并，避免重复代码（1）`npm i webpack-merge -D` （2）创建 `src/webpack/webpack.config.dev.js` 和 `src/webpack/webpack.config.prod.js`，并分别对不同环境进行配置 - 开发环境 webpack.config.dev.js （1）`npm i webpack-dev-server -D` （2）配置 ```js const path = require("path"); module.exports = { mode: "development", devServer: { hot: true, //热更新 open: true, //编译完自动打开浏览器 compress: true, //开启gzip压缩 port: 3000, //开启端口号 //托管的静态资源文件 //可通过数组的方式托管多个静态资源文件 static: { directory: path.join(__dirname, "../public"), }, }, }; ``` - 生产环境 webpack.config.prod.js ```js module.exports = { mode: "production", output: { clean: true } }; ``` （3）打开 package.json，写下命令 ```js { //...其他代码 "scripts": { "build": "webpack --config ./webpack/webpack.common.js --env production", "serve": "webpack serve --config ./webpack/webpack.common.js --env development" }, } ``` （4）修改 src/webpack/webpack.common.js 中的配置 ```js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //合并配置的插件 const { merge } = require("webpack-merge"); //引入生产环境和开发环境的配置 const prodConfig = require("./webpack.config.prod"); const devConfig = require("./webpack.config.dev"); const getStyleLoaders = (preProcessor) => { return [ MiniCssExtractPlugin.loader, "css-loader", //在 css-loader 后，配置 postcss-loader { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", // 能解决大多数样式兼容性问题 ], }, }, }, preProcessor, ].filter(Boolean); }; const commonConfig = { //打包的入口配置 //相对路径和绝对路径都行 entry: path.resolve(__dirname, "../src/index.js"), //打包文件的出口配置 output: { // path: 文件输出目录，必须是绝对路径 // path.resolve()方法返回一个绝对路径 // __dirname 当前文件的文件夹绝对路径 path: path.resolve(__dirname, '../dist'), //输出的文件名 filename: 'bundle.js', }, //加载器配置 module: { rules: [ { test: /\.css$/, use: getStyleLoaders(), }, { test: /\.less$/, //匹配以 less 结尾的文件 use: getStyleLoaders("less-loader"), }, { test: /\.s[ac]ss$/, use: getStyleLoaders("sass-loader"), }, { test: /\.(png|jpe?g|gif|webp)$/, type: "asset", parser: { dataUrlCondition: { // 小于10kb的图片会被base64处理 // 优点：减少请求数量 // 缺点：体积更大 maxSize: 10 * 1024 } }, generator: { // 将图片文件输出到 static/imgs 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "asset/imgs/[hash:8][ext][query]", }, }, { test: /\.(ttf|woff2?)$/, type: "asset/resource", generator: { filename: "asset/fonts/[hash:8][ext][query]", }, }, { test: /(\.jsx|\.js)$/, exclude: /node_modules/, // 排除node_modules代码不编译 loader: "babel-loader", }, ] }, //插件配置 plugins: [ new HtmlWebpackPlugin({ //输出的路径 template: path.resolve(__dirname, '../public/index.html'), //输出的文件名 filename: 'index.html' }), // 提取css成单独文件 new MiniCssExtractPlugin({ // 定义输出文件名和目录 filename: "asset/css/main.css", }), // css压缩 new CssMinimizerPlugin(), ], } module.exports = function(env) { //env.production 用于获取终端命令行中 const isProduction = env.production; process.env.NODE_ENV = isProduction ? "production": "development"; const config = isProduction ? prodConfig : devConfig; const mergeConfig = merge(commonConfig, config); return mergeConfig; }; ``` （5）运行 `npm run serve` 查看开发环境 ![1676181190999.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a08c7fa1fde84a5cac6a5790cf63795f~tplv-k3u1fbpfcp-watermark.image?) 打开 localhost:3000 ![1676181260385.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faf9aa83e21047f1b6bfc4bfd9a78f44~tplv-k3u1fbpfcp-watermark.image?) 此时，我们去更改 src/a.js 中的输出，然后保存 ```js //src/a.js export function printA() { console.log('aaaaaaaa') } ``` 发现页面进行了热更新 ![1676181337924.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3df2ae3c41db40d5b8bdd35f080a100c~tplv-k3u1fbpfcp-watermark.image?) 至此，webpack 的环境分离已经完成 # 结尾以上就是 webpack5 基础配置的教程，希望能帮助初学者学习，以及老手巩固基础如果 **这篇文章** 对你有帮助，欢迎 **点赞、收藏、评论**，如果有 **错误或还有疑问的地方**，请 **评论留言或者私信！**