• webpack5学习笔记

    基本使用

    1.资源目录：

    webpack_code         #项目根目录（所有指令必须在这个目录下运行

                    |____src   #项目源码目录

                               |___ js #js文件目录

                               |        |__ count.js

                               |        |__ sum.js

                               |____main.js # 项目主文件

    2.创建文件 

    • count.js
    1. export default function count(x,y) {
    2.     return x-y;
    3. }
    • sum.js
    1. export default function sum(...args) {
    2.     return args.reduce((p, c) => p + c, 0);
    3. }
    • main.js
    1. import count from "./js/count";
    2. import sum from "./js/sum";
    3.  
    4. console.log(count(2,1));
    5. console.log(sum(1, 2, 3, 4));

    3.下载依赖

    打开终端，来到项目根目录。运行以下指令：

    • 初始化 package.json
    npm init -y

    此时会生成一个基础的package.json 文件。

    需要注意的是 package.json 中 name 字段不能叫做 webpack ，否则下一步会报错

    • 下载依赖
    npm i webpack webpack-cli -D

    4.启用webpack

    • 开发模式
    npx webpack ./src/main.js --mode=development
    • 生产模式
    npx webpack ./src/main.js --mode=production

    npx webpack ：是用来运行本地安装 Webpack 包的。

    ./src/main.js ：指定 webpack 从 main.js 文件开始打包，不但会打包 main.js ，还会将其它依赖也一起打包进来。

    --mode=xxx ：指定模式（环境）

    5.观察输出文件

    默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

    小结

    Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

    所以我们学习 Webpack，就是主要学习如何处理其他资源。

    基本配置

    在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

    5 大核心概念

    1. entry（入口）

    指示 Webpack 从哪个文件开始打包

    2. output （输出）

    指示 Webpack 打包完的文件输出到哪里去，如何命名等

    3. loader（加载器）

    webpack 本身只能处理 js、json 等资源需要借助 loader，Webpack 才能解析

    4. plugins （插件）

    扩展 Webpack 的功能

    5. mode（模式）

    主要由两种模式：

    • 开发模式：development
    • 生产模式：production

    准备 Webpack 配置文件

    在根目录下新建文件：webpack.config.js

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2.  
    3. module.exports = {
    4.     // 入口
    5.     entry: './src/main.js', // 相对路径
    6.     // 输出
    7.     output: {
    8.         // 文件的输出路径
    9.         // __dirname nodejs的变量，代表当前文件的文件夹目录
    10.         path: path.resolve(__dirname, "dist"), // 绝对路径
    11.         // 文件名
    12.         filename: 'main.js',
    13.     },
    14.     // 加载器
    15.     module: {
    16.         rules: [
    17.             // loader的配置
    18.         ]
    19.     },
    20.     // 插件
    21.     plugins: [
    22.         // plugin的配置
    23.     ],
    24.     // 模式
    25.     mode: "development",
    26.     // mode:"production",
    27. }

    开发模式介绍

    开发模式顾名思义就是我们开发时使用的模式。

    这个模式下我们主要做两件事：

    1.编译代码，使浏览器能识别运行

    开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认不能处理这些资源，所以我们要加载配置来编译这些资源

    2.代码质量检查，树立代码规范

    提前检查代码的一些隐患，让代码运行时能更加健壮。

    提前检查代码规范和格式，同意团队编码风格，让代码更优雅美观。

    处理样式和图片资源

    学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 以及 png、jpeg 、gif 等图片资源

    介绍

    Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

    我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

    官方文档找不到的话，可以从社区 Github 中搜索查询

    Webpack官方Loader文档

    配置：

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2.  
    3. module.exports = {
    4.     // 入口
    5.     entry: './src/main.js', // 相对路径
    6.     // 输出
    7.     output: {
    8.         // 所有文件的输出路径
    9.         // __dirname nodejs的变量，代表当前文件的文件夹目录
    10.         path: path.resolve(__dirname, "dist"), // 绝对路径
    11.         // 入口文件打包输出文件名
    12.         filename: 'main.js',
    13.     },
    14.     // 加载器
    15.     module: {
    16.         rules: [
    17.             // loader的配置
    18.             {
    19.                 test: /\.css$/, // 只检测 .css文件
    20.                 use: [ // 执行顺序：从右到左（从下到上）
    21.                     "style-loader", // 将js中css通过创建style标签添加html文件中生效
    22.                     "css-loader", // 将css资源编译成 commonjs 的模块到js中
    23.                 ],
    24.             },
    25.             {
    26.                 test: /\.less$/,
    27.                 // loader:'xxx', // 只能使用1个loader
    28.                 use: [ // 使用多个loader
    29.                     // compiles Less to CSS
    30.                     'style-loader',
    31.                     'css-loader',
    32.                     'less-loader', // 将less编译成css文件
    33.                 ],
    34.             },
    35.             {
    36.                 test: /\.s[ac]ss$/,
    37.                 use: [
    38.                     // 将 JS 字符串生成为 style 节点
    39.                     'style-loader',
    40.                     // 将 CSS 转化成 CommonJS 模块
    41.                     'css-loader',
    42.                     // 将 Sass 编译成 CSS
    43.                     'sass-loader',
    44.                 ],
    45.             },
    46.             {
    47.                 test: /\.styl$/,
    48.                 use: [
    49.                     "style-loader",
    50.                     "css-loader",
    51.                     "stylus-loader", // 将 Stylus 文件编译为 CSS
    52.                 ],
    53.             },
    54.             {
    55.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    56.                 type: 'asset',
    57.             }
    58.             /* {
    59.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    60.                 type: 'asset',
    61.                 parser: {
    62.                     dataUrlCondition: {
    63.                         // 小于10kb 的图片转base64
    64.                         // 优点：减少请求数量  缺点：体积会更大
    65.                         maxSize: 4 * 1024 // 4kb
    66.                     }
    67.                 }
    68.             } */
    69.         ],
    70.     },
    71.     // 插件
    72.     plugins: [
    73.         // plugin的配置
    74.     ],
    75.     // 模式
    76.     mode: "development",
    77.     // mode:"production",
    78. }

    修改输出资源的名称和路径

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2.  
    3. module.exports = {
    4.     entry: './src/main.js', // 相对路径
    5.     output: {
    6.         // 所有文件的输出路径
    7.         // __dirname nodejs的变量，代表当前文件的文件夹目录
    8.         path: path.resolve(__dirname, "dist"), // 绝对路径
    9.         // 入口文件打包输出文件名
    10.         filename: 'static/js/main.js',
    11.     },
    12.     module: {
    13.         rules: [
    14.             {
    15.                 test: /\.css$/,
    16.                 use: ["style-loader","css-loader"],
    17.             },
    18.             {
    19.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    20.                 type: 'asset',
    21.                 generator: {
    22.                     // [hash:10] 代表hash值只取前10位
    23.                     filename: 'static/images/[hash:10][ext][query]'
    24.                 }
    25.             }
    26.         ],
    27.     },
    28.     plugins: [],
    29.     mode: "development",
    30.     // mode:"production",
    31. }

    自动清空上次打包资源

    1. const path = require("path");
    2.  
    3. module.exports = {
    4.     entry: './src/main.js',
    5.     output: {
    6.         path: path.resolve(__dirname, "dist"),
    7.         filename: 'static/js/main.js',
    8.         // 自动清空上次打包的内容
    9.         // 原理：在打包前，将path整个目录内容清空，再进行打包
    10.         clean: true,
    11.     },
    12.     module: {
    13.         rules: [
    14.             {}
    15.         ],
    16.     },
    17.     plugins: [],
    18.     mode: "development",
    19.     // mode:"production",
    20. }

    处理字体图标资源

    1. 下载字体图标文件

    2. 将相应的 css 文件和 fonts (ttf|woff等)文件夹复制到 src 文件夹下（注意：css文件里面路径要做相应修改）

    3. 将相应的css文件引入到main.js文件

    4. 在 html 引入字体图标，记得修改main.js引入的路径，之前修改掉了

     5. 修改配置文件

    1. const path = require("path");
    2.  
    3. module.exports = {
    4.     entry: './src/main.js',
    5.     output: {
    6.         path: path.resolve(__dirname, "dist"),
    7.         filename: 'static/js/main.js',
    8.         clean: true,
    9.     },
    10.     module: {
    11.         rules: [
    12.             {
    13.                 test: /\.css$/,
    14.                 use: ["style-loader","css-loader"],
    15.             },
    16.             {
    17.                 test: /\.less$/,
    18.                 use: ['style-loader','css-loader','less-loader'],
    19.             },
    20.             {
    21.                 test: /\.s[ac]ss$/,
    22.                 use: ['style-loader','css-loader','sass-loader'],
    23.             },
    24.             {
    25.                 test: /\.styl$/,
    26.                 use: ["style-loader","css-loader","stylus-loader"],
    27.             },
    28.             {
    29.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    30.                 type: 'asset',
    31.                 generator: {
    32.                     filename: 'static/images/[hash:10][ext][query]'
    33.                 }
    34.             },
    35.             {
    36.                 test: /\.(ttf|woff2?)$/,
    37.                 type: 'asset/resource',
    38.                 generator: {
    39.                     // 输出名称
    40.                     filename: 'static/media/[hash:10][ext][query]'
    41.                 }
    42.             },
    43.         ],
    44.     },
    45.     plugins: [],
    46.     mode: "development",
    47.     // mode:"production",
    48. }

    处理其他资源

    开发中可能还存在一些其他资源，如音视频等，我们也一起处理了

    1.配置

    1. const path = require("path"); 
    2.  
    3. module.exports = {
    4.     entry: './src/main.js', 
    5.     output: {
    6.         path: path.resolve(__dirname, "dist"), 
    7.         filename: 'static/js/main.js',
    8.         clean: true,
    9.     },
    10.     module: {
    11.         rules: [
    12.             {
    13.                 test: /\.css$/, 
    14.                 use: [ "style-loader","css-loader"],
    15.             },
    16.             {
    17.                 test: /\.less$/,
    18.                 use: ['style-loader','css-loader','less-loader'],
    19.             },
    20.             {
    21.                 test: /\.s[ac]ss$/,
    22.                 use: ['style-loader','css-loader','sass-loader'],
    23.             },
    24.             {
    25.                 test: /\.styl$/,
    26.                 use: ["style-loader","css-loader","stylus-loader"],
    27.             },
    28.             {
    29.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    30.                 type: 'asset',
    31.                 generator: {
    32.                     filename: 'static/images/[hash:10][ext][query]'
    33.                 }
    34.             },
    35.             {
    36.                 // 有其他资源时继续往后添加，就会原封不动输出的
    37.                 test: /\.(ttf|woff2?|map3|map4|avi)$/,
    38.                 type: 'asset/resource',
    39.                 generator: {
    40.                     filename: 'static/media/[hash:10][ext][query]'
    41.                 }
    42.             },
    43.         ],
    44.     },
    45.     plugins: [],
    46.     mode: "development",
    47.     // mode:"production",
    48. }

    处理 js 资源

    有人可能会问，js资源 Webpack 不是已经处理了吗，为什么我们还要处理呢？

    原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

    其中开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

    • 针对 js 兼容性处理，我们使用 Babel 来完成
    • 针对代码格式，我们使用 Eslint 来完成

    我们先完成 Eslint ，检测代码格式无误后，在由 Babel 做代码兼容性处理

    Eslint

    可组装的 JavaScript 和 JSX 检查工具。

    这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

    我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

    1. 配置文件

    配置文件有很多种写法：

    .eslintrc.* ：新建文件，位于项目根目录

    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
    • 区别在于配置格式不一样

    package.json 中 eslintConfig ：不需要创建文件，在原文件基础上写 Eslint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

    2. 具体配置

    我们以 .eslintrc.js 配置文件为例：

    1. module.exports = {
    2.     // 解析选项
    3.     parserOptions: {},
    4.     // 具体检查规则
    5.     rules:{},
    6.     // 继承其他规则
    7.     extends：[],
    8.     // ...
    9.     // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
    10. };

    1. parserOptions 解析选项

    1. parserOptions: {
    2.     ecmaVersion: 6, // ES 语法版本
    3.     sourceType: "module", // ES 模块化
    4.     ecmaFeatures:{ // ES 其他特性
    5.         jsx: ture // 如果是 React 项目，就需要开启 jsx 语法
    6.     }
    7. }

    2. rules 具体规则

    • "off" 或 0 - 关闭规则
    • "warn"或 1 - 开启规则，使用警告级别的错误：warn（不会导致程序退出）
    • "error"或 2 - 开启规则，使用错误级别的错误：error（当被触发的时候，程序会退出）
    1. rules: {
    2.     semi: "error", // 禁止使用分号
    3.     'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句。否则警告
    4.     'default-case': [
    5.         'warn', // 要求 switch 语句中有 default 分支，否则警告
    6.         { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
    7.     ],
    8.     eqeqeq: [
    9.         'warn', // 强制使用 === 和 !== ，否则警告
    10.         'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
    11.     ],
    12. }

    更多规则详见：规则文档

    3. extends 继承

    开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

    现有以下较为有名的规则：

    • Eslint 官方的规则：eslint:recommended
    • Vue Cli 官方的规则：plugin:vue/essential
    • React Cli 官方的规则：react-app
    1. // 例如在React项目中，我们可以这样写配置
    2. module.exports = {
    3.     extends:["react-app"],
    4.     rules:{
    5.         // 我们的规则会覆盖掉react-app的规则
    6.         // 所以想要修改规则直接改就是了
    7.         eqeqeq:["warn","smart"],
    8. },

    3. 在 Webpack 中使用

    1. 下载包

    npm i eslint-webpack-plugin eslint -D

    2. 修改 webpack.config.js 文件

    • webpack.config.js
    1. // 把插件添加到你的 webpack 配置
    2. const ESLintPlugin = require('eslint-webpack-plugin');
    3.  
    4. module.exports = {
    5.   // ...
    6.   // 插件
    7.     plugins: [
    8.         // plugin的配置
    9.         new ESLintPlugin({
    10.             // 检测哪些文件
    11.             context: path.resolve(__dirname, "src")
    12.         })
    13.     ],
    14.   // ...
    15. };

    3. 定义 Eslint 配置文件

    • .eslintrc.js
    1. module.exports = {
    2.     // 继承 Eslint 规则
    3.     extends: ["eslint:recommended"],
    4.     env: {
    5.         node: ture, // 启用node中全局变量
    6.         browser: true, // 启用浏览器中全局变量
    7.     }，
    8.     parserOptions: {
    9.         ecmaVersion: 6,
    10.         sourceType: "module",
    11.     },
    12.     rules: {
    13.         "no-var": 2, // 不能使用 var 定义变量
    14.     }，
    15. }；

    4.修改 js 文件代码

    • main.js
    1. import count from "./js/count";
    2. import sum from "./js/sum";
    3. // 要想 webpack 打包资源，必须引入该资源
    4. import "./css/iconfont.css";
    5. import "./css/index.css";
    6. import "./less/index.less";
    7. import "./sass/index.sass";
    8. import "./sass/index.scss";
    9. import "./stylus/index.styl";
    10.  
    11. const result = count(2, 1); // 不能用 var 会报错
    12. console.log(result);
    13. // console.log(count(2, 1));
    14. console.log(sum(1, 2, 3, 4));

    5. 添加.eslintignore 文件

    由于我在VS Code里添加了Eslint语法检查的插件，而我们不需要他检查输出的js文件，也就是dist文件夹，此时我们要新添加一个配置文件.eslintignore 文件，里面写dist，这样他就会忽略dist文件夹里的js文件，从而不报红色波浪线的错误

    • .eslintignore
    dist

    Babel

    JavaScript 编译器。

    主要用于将 ES6 语法编写的代码转换为向后兼容的JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

    1. 配置文件

    配置文件有很多种写法：

    babel.config.* ：新建文件，位于项目根目录

    • babel.config.js
    • babel.config.json

    .babelrc.* ：新建文件，位于项目根目录

    • .babelrc
    • .babelrc.js
    • .babelrc.json

    package.json 中  babel ：不需要创建文件，在原文件基础上写 Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

    2. 具体配置

    我们以 babel.config.js 配置文件为例：

    1. module.exports = {
    2.     // 预设
    3.     presets: [],
    4. };

    1. presets 预设

    简单理解：就是一组 Babel 插件，扩展 Babel 功能

    • @babel/preset-env ：一个智能预设，允许您使用最新的JavaScript。
    • @babel/preset-react ：一个用来编译 Recat jsx 语法的预设
    • @babel/preset-typescript ：一个用来编译 TypeScript 语法的预设

    3. 在 Webpack 中使用

    1. 下载包

    npm i babel-loader @babel/core @babel/preset-env -D

    2. 定义 Babel 配置文件

    • babel.config.js
    1. module.export = {
    2.     // 智能预设：能够编译ES6语法
    3.     presets: ['@babel/preset-env'],
    4. }

    3. 配置 webpack.config.js 文件

    • webpack.config.js

    在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中，就像下面这样：

    1. module: {
    2.   rules: [
    3.     {
    4.       test: /\.m?js$/,
    5.       exclude: /node_modules/, // 排除node_modules中的js文件（这些文件不处理）
    6.       /* use: {
    7.             loader: 'babel-loader',
    8.             options: {
    9.                 presets: ['@babel/preset-env']
    10.             }
    11.       } */
    12.       /* loader: 'babel-loader',
    13.       options: {
    14.           presets: ['@babel/preset-env']
    15.       } */
    16.       loader: 'babel-loader',
    17.       // options也可以写在外面，babel.config.js 里面 
    18.     }
    19.   ]
    20. }

    处理 Html 资源

    1. 下载包

    npm i html-webpack-plugin -D

    2. 配置

    webpack.config.js

    1. const HtmlWebpackPlugin = require('html-webpack-plugin');
    2. const path = require('path');
    3.  
    4. module.exports = {
    5.   entry: 'index.js',
    6.   output: {
    7.     path: path.resolve(__dirname, './dist'),
    8.     filename: 'index_bundle.js',
    9.   },
    10.   plugins: [
    11.         new HtmlWebpackPlugin({
    12.             // 模板：以public/index.html 文件创建新的html文件
    13.             // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
    14.             template: path.resolve(__dirname, "public/index.html"),
    15.         })
    16.     ],
    17. };

    开发服务器&自动化

    注意：自动化开发服务器运行后不会自动生成dist文件夹

    1. 下载包

    npm i webpack-dev-server -D

    2. 配置

    • webpack.config.js
    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2. const ESLintPlugin = require('eslint-webpack-plugin');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin');
    4.  
    5. module.exports = {
    6.     // ......
    7.     plugins: [],
    8.     // 开发服务器：不会输出资源，在内存中编译打包的
    9.     devServer: {
    10.         host:"localhost", // 启动服务器域名
    11.         port: "3000", // 启动服务器端口号
    12.         open: true, // 是否自动打开浏览器
    13.     },
    14.     mode:"development",
    15. }

    3.运行指令

    npx webpack serve

    生产模式介绍

    生产模式是开发完成代码后，我们需要将代码进行部署上线。

    这个模式下我们主要对代码进行优化，让其运行性能更好。

    优化主要从两个角度出发：

    1. 优化代码运行性能
    2. 优化代码打包速度

    生产模式准备

    我们分别准备两个配置文件来放不同的配置

    1. 文件目录

    |—— webpack-test（项目根目录）

              |—— config （Webpack配置文件目录）
              |         |—— webpack.dev.js（开发模式配置文件）

              |         |—— webpack.prod.js（开发模式配置文件）

              |—— node_modules （下载包存放目录）

              |—— src（项目源码目录，除了html其他都在src里面）

              |          |——略

              |——public（项目html文件）

              |         |——index.html

              |—— .eslintrc.js (Eslint配置文件）

              |—— babel.config.js (Babel配置文件)

              |—— package.json（包的依赖管理配置文件）

    2. 修改 webpack.dev.js

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2. const ESLintPlugin = require('eslint-webpack-plugin');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin');
    4.  
    5. module.exports = {
    6.     entry: './src/main.js',
    7.     output: {
    8.         // 所有文件的输出路径
    9.         // 开发模式没有输出
    10.         path: undefined,
    11.         // ......
    12.     },
    13.     module: {
    14.         rules: [
    15.             {
    16.                 test: /\.css$/,
    17.                 use: ["style-loader","css-loader"],
    18.             },
    19.             {
    20.                 test: /\.less$/,
    21.                 use: ['style-loader','css-loader','less-loader'],
    22.             },
    23.             // .......
    24.         ],
    25.     },
    26.     plugins: [
    27.         new ESLintPlugin({
    28.             // 检测哪些文件
    29.             context: path.resolve(__dirname, "../src")
    30.         }),
    31.         new HtmlWebpackPlugin({
    32.             // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
    33.             template: path.resolve(__dirname, "../public/index.html"),
    34.         })
    35.     ],
    36.     devServer: {
    37.         host: "localhost",
    38.         port: "3000",
    39.         open: true,
    40.     },
    41.     mode: "development",
    42. }

     3. 开发模式下运行

    npx webpack serve --config ./config/webpack.dev.js

    4. 修改 webpack.prod.js

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2. const ESLintPlugin = require('eslint-webpack-plugin');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin');
    4.  
    5. module.exports = {
    6.     entry: './src/main.js',
    7.     output: {
    8.         // 所有文件的输出路径
    9.         // __dirname nodejs的变量，代表当前文件的文件夹目录
    10.         path: path.resolve(__dirname, "../dist"), // 绝对路径
    11.         // 入口文件打包输出文件名
    12.         filename: 'static/js/main.js',
    13.         // 自动清空上次打包的内容
    14.         // 原理：在打包前，将path整个目录内容清空，再进行打包
    15.         clean: true,
    16.     },
    17.     module: {
    18.         rules: [
    19.             {
    20.                 test: /\.css$/,
    21.                 use: ["style-loader","css-loader"],
    22.             },
    23.             {
    24.                 test: /\.less$/,
    25.                 use: ['style-loader','css-loader','less-loader'],
    26.             },
    27.             // .......
    28.         ],
    29.     },
    30.     plugins: [
    31.         new ESLintPlugin({
    32.             // 检测哪些文件
    33.             context: path.resolve(__dirname, "../src")
    34.         }),
    35.         new HtmlWebpackPlugin({
    36.             // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
    37.             template: path.resolve(__dirname, "../public/index.html"),
    38.         })
    39.     ],
    40.     mode: "production",
    41. }

     5. 生产模式下运行

    npx webpack --config ./config/webpack.prod.js

    优化运行代码

    在package.json里面的script配置

    1. "scripts": {
    2.         "start": "npm run dev",
    3.         "dev": "webpack serve --config ./config/webpack.dev.js",
    4.         "build": "webpack --config ./config/webpack.prod.js"
    5.     },

    这样运行开发模式的代码就是：npm start

    这样运行生产模式的代码就是：npm run build

    Css 处理

    提取Css成单独文件

    Css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式

    这样对于网站来说，会出现闪屏现象，用户体验不好

    我们应该是单独的Css文件，通过link标签加载性能更好

    1. 下载包

    npm i mini-css-extract-plugin -D

    2. 配置

    webpack.prod.js

    1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    2.  
    3. module.exports = {
    4.   plugins: [
    5.     new MiniCssExtractPlugin({
    6.          // 指定文件输出目录
    7.          filename: "static/css/main.css"
    8.     }),
    9.   ],
    10.   module: {
    11.     rules: [
    12.       {
    13.         test: /\.css$/i,
    14.         use: [MiniCssExtractPlugin.loader, "css-loader"],
    15.       },
    16.     ],
    17.   },
    18. };

    Css 兼容性处理

    1.下载包

    npm i postcss-loader postcss postcss-preset-env -D

    2. 配置

    webpack.prod.js

    在css-loader后面，less-loader前面插入配置代码

    1. module.exports = {
    2.   module: {
    3.     rules: [
    4.       {
    5.         test: /\.css$/i,
    6.         use: [
    7.           'style-loader',
    8.           'css-loader',
    9.           {
    10.             loader: 'postcss-loader',
    11.             options: {
    12.               postcssOptions: {
    13.                 plugins: [
    14.                   [
    15.                     'postcss-preset-env',
    16.                     {
    17.                       // 其他选项
    18.                     },
    19.                   ],
    20.                 ],
    21.               },
    22.             },
    23.           },
    24.         ],
    25.       },
    26.     ],
    27.   },
    28. };

    或者使用 PostCSS 本身的 配置文件：

    postcss.config.js

    1. module.exports = {
    2.     // 你可以指定下面提到的所有选项 https://postcss.org/api/#processoptions
    3.     // parser: 'sugarss',
    4.     plugins: [
    5.         // PostCSS 插件
    6.         ['postcss-short', { prefix: 'x' }],
    7.         'postcss-preset-env',
    8.     ],
    9. };

    Loader 将会自动搜索配置文件。

    webpack.config.js

    1. module.exports = {
    2.   module: {
    3.     rules: [
    4.       {
    5.         test: /\.css$/i,
    6.         use: ['style-loader', 'css-loader', 'postcss-loader'],
    7.       },
    8.     ],
    9.   },
    10. };

    最后，通过你喜欢的方式运行 webpack

    3. 控制兼容性

    我们可以在 package.json 文件中添加 browerslist 来控制样式的兼容性做到什么程度。

    1. {
    2.     // 其他省略
    3.     "browserslist": ["ie >= 8"]
    4. }

    想要知道更多的 browserslist 配置，查看 browserslist 文档

    以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

    实际开发中我们一般不考虑旧版本浏览器，所以我们可以这样设置：

    1. {
    2.     // 其他省略
    3.     " browserslist": ["last 2 version", ">1%", "not dead"]
    4. }

    4. 合并配置

    由于代码复用率较高，我们可以封装处理样式的函数

    1. const path = require("path"); // nodejs核心模块，专门用来处理路径问题
    2. const ESLintPlugin = require('eslint-webpack-plugin');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin');
    4. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    5.  
    6. // 用来获取处理样式的loader
    7. function getStyleLoader(pre) {
    8.     return [
    9.         MiniCssExtractPlugin.loader, // 将js中css通过创建style标签添加html文件中生效
    10.         "css-loader", // 将css资源编译成 commonjs 的模块到js中
    11.         'postcss-loader',
    12.         pre,
    13.     ].filter(Boolean);
    14.  
    15. }
    16.  
    17. module.exports = {
    18.     // 入口
    19.     entry: './src/main.js', // 相对路径
    20.     // 输出
    21.     output: {
    22.         // 所有文件的输出路径
    23.         // __dirname nodejs的变量，代表当前文件的文件夹目录
    24.         path: path.resolve(__dirname, "../dist"), // 绝对路径
    25.         // 入口文件打包输出文件名
    26.         filename: 'static/js/main.js',
    27.         // 自动清空上次打包的内容
    28.         // 原理：在打包前，将path整个目录内容清空，再进行打包
    29.         clean: true,
    30.     },
    31.     // 加载器
    32.     module: {
    33.         rules: [
    34.             // loader的配置
    35.             {
    36.                 test: /\.css$/, // 只检测 .css文件
    37.                 use: getStyleLoader(),
    38.             },
    39.             {
    40.                 test: /\.less$/,
    41.                 // loader:'xxx', // 只能使用1个loader
    42.                 use: getStyleLoader('less-loader'),
    43.             },
    44.             {
    45.                 test: /\.s[ac]ss$/,
    46.                 use: getStyleLoader('sass-loader'),
    47.             },
    48.             {
    49.                 test: /\.styl$/,
    50.                 use: getStyleLoader('stylus-loader'),
    51.             },
    52.             {
    53.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    54.                 type: 'asset',
    55.                 generator: {
    56.                     // [hash:10] 代表hash值只取前10位
    57.                     filename: 'static/images/[hash:10][ext][query]'
    58.                 }
    59.             },
    60.             /* {
    61.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    62.                 type: 'asset',
    63.                 parser: {
    64.                     dataUrlCondition: {
    65.                         // 小于10kb 的图片转base64
    66.                         // 优点：减少请求数量  缺点：体积会更大
    67.                         maxSize: 4 * 1024 // 4kb
    68.                     }
    69.                 }
    70.             } */
    71.             {
    72.                 test: /\.(ttf|woff2?|map3|map4|avi)$/,
    73.                 type: 'asset/resource',
    74.                 generator: {
    75.                     // 输出名称
    76.                     filename: 'static/media/[hash:10][ext][query]'
    77.                 }
    78.             },
    79.             {
    80.                 test: /\.m?js$/,
    81.                 exclude: /node_modules/, // 排除node_modules中的js文件（这些文件不处理）
    82.                 /* use: {
    83.                     loader: 'babel-loader',
    84.                     options: {
    85.                         presets: ['@babel/preset-env']
    86.                     }
    87.                 } */
    88.                 /* loader: 'babel-loader',
    89.                 options: {
    90.                     presets: ['@babel/preset-env']
    91.                 } */
    92.                 loader: 'babel-loader',
    93.                 // options也可以写在外面
    94.             },
    95.         ],
    96.     },
    97.     // 插件
    98.     plugins: [
    99.         // plugin的配置
    100.         new ESLintPlugin({
    101.             // 检测哪些文件
    102.             context: path.resolve(__dirname, "../src")
    103.         }),
    104.         new HtmlWebpackPlugin({
    105.             // 模板：以public/index.html 文件创建新的html文件
    106.             // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
    107.             template: path.resolve(__dirname, "../public/index.html"),
    108.         }),
    109.         new MiniCssExtractPlugin({
    110.             // 指定文件输出目录
    111.             filename: "static/css/main.css"
    112.         }),
    113.     ],
    114.     // 模式
    115.     // mode: "development",
    116.     mode: "production",
    117. }

     Css压缩

    1. 下载包

    npm i css-minimizer-webpack-plugin -D

    2.  配置

    • webpack.prod.js
    1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    2. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
    3.  
    4. module.exports = {
    5.   module: {
    6.     rules: [
    7.       {
    8.         test: /.s?css$/,
    9.         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    10.       },
    11.     ],
    12.   },
    13.   optimization: {
    14.     minimizer: [
    15.       // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
    16.       // `...`,
    17.       new CssMinimizerPlugin(),
    18.     ],
    19.   },
    20.   plugins: [new MiniCssExtractPlugin()],
    21. };

    html压缩

    默认生产模式已经开启了：html 压缩和 js压缩

    不需要额外进行配置

  • 相关阅读:
    分治算法（divide and conquer）
    sqli第24关二次注入
    父相子绝 巧用auto
    GBase 8c PGXC_CLASS系统表
    sed使用技巧-在replacement块获取pattern匹配的值
    vue3使用v-model控制子组件进行双向数据绑定
    vue安装依赖出现npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve错误解决方法
    SpringCloud学习笔记-注册微服务到Eureka注册中心
    宏观经济学复习
    《LKD3粗读笔记》(11)定时器和时间管理
  • 原文地址：https://blog.csdn.net/DIUDIUjiang/article/details/127388827