Webpack 基础

Webpack 基础

根本使用

webpack是一个静态资源打包工具。
它会将一个或者多个文件作为打包的入口，将我们整个项目全部文件编译组合成一个或者多个文件输出出去。
输出的文件就是编译好的文件，就可以在浏览器端运行。
我们将webpack输出的文件叫做bundle。
功能先容

webpack自己功能是有限的：

• 开发模式：仅能编译JS中的ES Module语法。
  
• 生产模式：能编译JS中的ES Module语法，还能压缩JS代码。
  

开始使用

1.资源目录

1. webpack_code # 项目根目录（所有指令必须在这个目录中运行）
2.    └── src # 项目源码目录
3.         |──js # js目录
4.         |  |—— count.js
5.         |  └── sum.js
6.         └── 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((pre,cur)=> pre + cur,0)
3. }

复制代码

• main.js
  

1. import count from "./js/count"
2. import sum form "./js/sum"
4. console.log(count(2,1))
5. console.log(count(1,2,3,4,5))

复制代码

3.下载依赖

打开终端，在项目根目录下实行指令

• 初始化``package.json
  

1. npm init -y

复制代码

• 下载依赖
  

1. npm i webpack webpack-cli -D

复制代码

4.启用webpack

• 开发模式
  

1. npx webpack ./src/main.js --mode=development

复制代码

• 生产模式
  

1. npx webpack ./src/main.js --mode=production

复制代码

npx webpack：是用来运行本地安装webpack包的。
./src/main.js：指定webpack从main.js文件开始打包，不但会打包main.js，还会将其他依赖也一起打包进来。
--mode=production：指定模式（环境）。
5.观察输出文件

默认webpack会将文件打包输出到dist目录下。
webpack自己功能比力少，只能处理js资源，一旦遇到css等其他资源就会报错。
全部我们学习webpack，就是主要学习怎样处理其他资源。
根本配置

在开始使用webpack之前，我们需要对webpack的配置有肯定的认识。
五大核心概念

• entry（入口）
  

   指示 webpack 从哪个文件开始打包。
  

• output（输出）
  

   指示 webpack 打包完的文件输出到哪里去，怎样定名。
  

• loader（加载器）
  

   webpack 自己只能处理js、json等资源，其他资源需要借助loader，webpack 才能解析。
  

• plugins（插件）
  

   扩展 webpack 功能。
  

• mode（模式）
  

   主要有两种开发模式：
  

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

  webpack 配置文件

webpack.config.js

1. const path = require("path")
2. module.exports = {
3.     //入口
4.     entry: "./src/main.js",
5.     // 输出
6.     output: {
7.         // 文件的输出路径
8.         path: path.resolve(__dirname, "dist"),
9.         filename: "main.js"
10.     },
11.     // 加载器
12.     module: {
13.         rules: []
14.     },
15.     // 插件
16.     plugins: [],
17.     // 模式
18.     mode: "development"
19. }

复制代码

开发模式

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：

• 编译代码，使浏览器能识别运行。
  

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

• 代码质量检查，树立代码规范。
  

   提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，同一团队编码风格，让代码更优雅美观。
  处理样式资源

学习使用webpack处理Css、Less、Sass、Styl样式资源
先容

webpack 自己是不能识别样式资源的，以是我们需要借助Loader来帮助webpack解析样式资源。
需要的Loader都应该去官方文档中查找对应的Loader。
webpack 官方Loader文档
处理CSS资源

• 下载包
  

1. npm i css-loader style-loader -D

复制代码

需要下载两个Loader

• 功能先容
  
  
  
  • css-loader：负责将CSS文件编译成webpack能识别的模块。
    
  • style-loader：会动态创建一个style标签，内里放置webpack中的CSS模块内容。
    
  
  
• 配置
  

1.     module: {
2.         // loader的配置
3.         rules: [{
4.             test: /\.css$/,
5.             use: [
6.                 // 执行的顺序，从右到左（从上到下）
7.                 "style-loader", // 将js中css通过创建style标签添加html文件中生效
8.                 "css-loader" // 将样式编译成commonjs的模块
9.             ]
10.         }]
11.     },

复制代码

处理less文件

• 下载包
  

1. npm i -D less-load

复制代码

• 功能先容
  less-loader：负责将less文件编译成CSS文件
  
• 配置
  

1.   module: {
2.         // loader的配置
3.         rules: [ {
4.             test: /\.less$/,
5.             // loader:'xxx'只能使用单个loader
6.             // user 使用多个loader
7.             use: [
8.                 "style-loader",
9.                 "css-loader",
10.                 "less-loader" // 将Less 编译成css文件
11.             ]
12.         }]
13.     },

复制代码

处理Sass和Scss资源

• 下载包
  

1. npm i sass-loader sass -D

复制代码

注意：需要下载两个

• 功能先容
  
  
  
  • sass-loader：负责将Sass文件编译成Css文件。
    
  • sass：sass-loader依赖sass进行编译。
    
  
  
• 配置
  

1. module: {
2.         // loader的配置
3.         rules: [{
4.             test: /\.s[ac]ss$/,
5.             use: [
6.                 "style-loader",
7.                 "css-loader",
8.                 "sass-loader"
9.             ]
10.         }]
11.     },

复制代码

处理styl资源

• 下载包
  

1. npm i stylus-loader -D

复制代码

• 功能先容
  
  
  
  • stylus-loader：负责将Styl文件编译成Css文件。
    
  
  
• 配置
  

1.     module: {
2.         // loader的配置
3.         rules: [{
4.             test: /\.styl$/,
5.             use: [
6.                 "style-loader",
7.                 "css-loader",
8.                 "stylus-loader"
9.             ]
10.         }]
11.     },

复制代码

处理图片资源

webpack4 时，我们处理图片资源通过file-loader和url-loader进行处理。
如今webpack已经将两个Loader功能内置到webpack

• 配置
  

1.     module: {
2.         // loader的配置
3.         rules: [{
4.             test: /\.(png|jpe?g|gif|webp)$/,
5.             type: "asset",
6.             parser: {
7.                 dataUrlCondition: {
8.                     // 小于 10 kb 转base64
9.                     // 优点：减少请求数量，缺点：打包后的结果体积增大
10.                     maxSize: 20 * 1024,
11.                 }
12.             },
13.             generator: {
14.                 // 输出图片名称
15.                 // [hash:10] hash 值取前10位
16.                 filename: "static/images/[hash:10][ext][query]"
17.             }
18.         }]
19.     },

复制代码

自动清空打包内容

1.     output: {
2.         // 文件的输出路径
3.         path: path.resolve(__dirname, "dist"),
4.         filename: "js/main.js",
5.         clean: true
6.     },

复制代码

处理字体图标资源

• 下载字体文件
  
  
  
  • 我用 ttf 文件做测试。
    
  • 放在项目目录中
    
  
  
• 在 css 中引入字体
  

1. @font-face {
2.     font-family: "HY";
3.     src: url("../fonts/HanYiXingKaiJian-1.ttf");
4. }

复制代码

1. div {
2.     font-family: "HY";
3. }

复制代码

• 配置
  

1.     modules:{
2.         test: /\.ttf|worff?$/,
3.             generator: {
4.                 // 输出图片名称
5.                 // [hash:10] hash 值取前10位
6.                 filename: "static/font/[hash:10][ext][query]"
7.             }
8.     }

复制代码

处理其他资源

   如遇到 音视频文件、文本文档等，我们将这些资源打包输出到dist目录中。
  

• 配置
  

1. {
2.     test: /\.video|audio|xsl|doc$/,
3.     generator: {
4.         filename: "static/media/[hash:10][ext][query]"
5.     }
6. }

复制代码

处理JS资源

   webpack对JS处理是有限的，只能编译JS中的模块化语法，不能编译其他语法，导致JS不能在IE等浏览器运行，以是我们希望做一些兼容性处理。
其次，在开发中团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业工具来检测。
  

• 针对JS兼容性处理，我们手机用Babel做代码兼容处理。
  
• 针对代码格式，我们使用ESlint来完成。
  

先使用 ESlint 做代码检查，然后再使用Babel做代码兼容性处理。
ESlint

可组装的JavaScript和JSX检查工具。
使用ESlint关键是使用它的配置文件，内里写的各种rule规则，将来运行ESlint时就会以写的规则对代码进行检查。
配置文件

配置文件有许多种写法：

• .eslintrc：新建文件，位于项目根目录
  
  
  
  • .eslintrc
    
  • .eslintrc.js
    
  • .eslintrc.json
    
  
  
• package.json 中 eslintConfig不需要配置文件，在原有的文件基础上写。
  ESlint 会查找和自动读取它们，以是以上配置文件只需要存在一个即可。
  

具体配置

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

1. module.exports = {
2.     // 解析选项
3.     parserOptions:{},
4.     // 具体检查规则
5.     rules:{},
6.     // 继承其他规则
7.     extends:[],
8. }

复制代码

ESlint 规则

• parserOptions 解析选项
  

1. {
2.     parserOptions:{
3.         ecmaVersion: 6 // ES 语法版本
4.         sourceType: "module" // ES 模块化
5.         ecmaFeatures:{
6.             // ES 其他特性
7.             // 如果是 react 项目 需要开启
8.             jsx:true
9.         }
10.     }
11. }   

复制代码

• rule规则
  
  
  
  • off或0 - 关闭规则
    
  • warn或1 - 开启规则，使用告诫级别的错误：warn（不会导致程序退出）。
    
  • error或2 - 开启规则，使用错误级别的错误：error（当被触发的时候，程序会退出）。
    
  
  

1. {
2.     rules:{
3.         semi:"error", // 禁止使用分号
4.         'array-callback-return':'warn', // 强制数组的回调函数中有 return 语句，否则警告。
5.         'default-case':[
6.             'warn', // 要求 switch 语句中有 default分支，否则警告
7.             {
8.                 commentPattern:'^no default$' // 允许在最后注释：no default ，就不会有警告。
9.             }
10.         ],
11.         eqeqeq:[
12.             'warn', // 强制使用 === 和 !==，否则警告。
13.             'smart' //
14.         ]
15.     }
16. }

复制代码

• extends 继承
  开发中一点点写rules规则太费劲，以是有更好的办法，继承现有的规则。
  现有如下较为有名的规则：
  
  
  
  • Eslint官方规则：eslint:recommended
    
  • Vue Cli官方规则：plugin:vue/essential
    
  • React Cli官方规则：reat-app
    
  
  

1. {
2.     extends:["react-app"],
3.     rules:{
4.         // 我们的规则会覆盖掉react-app的规则
5.         // 所以想要修改规则直接改就行
6.         eqeqeq:["warn","smart"]
7.     }
8. }

复制代码

在webpack中使用

• 下载包
  

1. npm i eslint-webpack-plugin eslint -D

复制代码

• 定义Eslint配置文件
  
  
  
  • .eslintrc.js
    
  1. import globals from "globals";
  2. import pluginJs from "@eslint/js";
  3. import pluginVue from "eslint-plugin-vue";
  6. /** @type {import('eslint').Linter.Config[]} */
  7. export default [
  8.     { files: ["**/*.{js,mjs,cjs,vue}"] },
  9.     { languageOptions: { globals: globals.browser } },
  10.     pluginJs.configs.recommended,
  11.     ...pluginVue.configs["flat/essential"],
  12.     {
  13.         rules: {
  14.         "no-var": 2 // 不能使用var定义变量
  15.         }
  16.      }, {
  17.     ignorePatterns: ["./config/*", "./dist/*", "*.config.js"]
  18.     }
  19. ];

  复制代码
  
  
• 下载插件
  

1. npm init @eslint/config@latest

复制代码

• 配置eslint.config.mjs
  

1. import globals from "globals";
2. import pluginJs from "@eslint/js";
3. import pluginVue from "eslint-plugin-vue";
6. /** @type {import('eslint').Linter.Config[]} */
7. export default [
8.   { files: ["**/*.{js,mjs,cjs,vue}"] },
9.   { languageOptions: { globals: globals.browser } },
10.   pluginJs.configs.recommended,
11.   ...pluginVue.configs["flat/essential"],
12.   {
13.     rules: {
14.       "no-var": 2 // 不能使用var定义变量
15.     }
16.   }, {
17.     ignores: ["webpack.config.js", "dist/"]
18.   }
19. ];

复制代码

• 配置webpack.config.js
  

1. {
3.     plugins: [
4.         new ESLintPlugin({
5.             context: path.resolve(__dirname, "src")
6.         })
7.     ],
8. }

复制代码

Babel

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

配置文件有许多种写法：

• babel.config.*：新建文件，位于项目根目录。
  
  
  
  • babel.config.js
    
  • babel.config.json
    
  
  
• .babelrc.*：新建文件，位于项目根目录。
  
  
  
  • .babelrc
    
  • babelrc.js
    
  • bablerc.json
    
  
  
• package.json中babel：不需要创建文件，在原有文件基础上写。
  Babel 会查找和自动读取它们，以是以上配置文件只需要存在一个即可。
  

具体配置

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

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

复制代码

• presets预设
  简单明白：就是一组Babel插件，扩展Babel功能。
  
• @babel/preset-env：智能预设，答应使用最新JavaScript。
  
• @babel/preset-react：用来编译React jsx 语法预设。
  
• @babel/preset-typescript：用来编译TypeScript语法的预设。
  

webpack中的使用

• 下载包
  

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

复制代码

• 定义Babel配置文件
  创建文件 babel.config.js
  

1. module.exports = {
2.     // 智能预设，编译es6语法
3.     presets: ["@babel/preset-env"]
4. }

复制代码

• webpack.config.js 配置文件
  

1. {
2.     module:{
3.             test: /\.js$/,
4.             // 排除node_modules中的js文件（这些文件不处理）
5.             exclude: /node_modules/,
6.             loader: "babel-loader"
7.     }
8. }

复制代码

处理Html资源

下载包

1. npm i html-webpack-plugin -D

复制代码

配置

• webpack.config.js
  

1. {
2.     plugins:[
3.         new htmlWebpackPlugin({
4.             template:path.resolve(__dirname,"public/html")
5.         })
6.     ]
7. }

复制代码

开发服务器&自动化

自动化编译代码
下载包

1. npm i webpack-dev-server -D

复制代码

配置

• webpack.config.js
  

1. {
2.     // 开发服务器不会输出资源，在内存中编译打包的
3.     devServer: {
4.         // 启动服务器域名
5.         host: "localhost",
6.         port: "3000",
7.         open: true
8.     },
9. }

复制代码

• 运行指令
  

1. npx webpack serve

复制代码

总结

1. const ESLintPlugin = require('eslint-webpack-plugin');
2. const HtmlWebpackPlugin = require('html-webpack-plugin');
3. const path = require("path")
4. module.exports = {
5.     //入口
6.     entry: "./src/main.js",
7.     // 输出
8.     output: {
9.         // 文件的输出路径
10.         path: path.resolve(__dirname, "dist"),
11.         filename: "main.js",
12.         clean: true
13.     },
14.     // 加载器
15.     module: {
16.         // loader的配置
17.         rules: [{
18.             test: /\.css$/,
19.             use: [
20.                 // 执行的顺序，从右到左（从上到下）
21.                 "style-loader", // 将js中css通过创建style标签添加html文件中生效
22.                 "css-loader" // 将样式编译成commonjs的模块
23.             ]
24.         }, {
25.             test: /\.less$/,
26.             // loader:'xxx'只能使用单个loader
27.             // user 使用多个loader
28.             use: [
29.                 "style-loader",
30.                 "css-loader",
31.                 "less-loader" // 将Less 编译成css文件
32.             ]
33.         }, {
34.             test: /\.s[ac]ss$/,
35.             use: [
36.                 "style-loader",
37.                 "css-loader",
38.                 "sass-loader"
39.             ]
40.         }, {
41.             test: /\.styl$/,
42.             use: [
43.                 "style-loader",
44.                 "css-loader",
45.                 "stylus-loader"
46.             ]
47.         }, {
48.             test: /\.(png|jpe?g|gif|webp)$/,
49.             type: "asset",
50.             parser: {
51.                 dataUrlCondition: {
52.                     // 小于 10 kb 转base64
53.                     // 优点：减少请求数量，缺点：打包后的结果体积增大
54.                     maxSize: 20 * 1024,
55.                 }
56.             },
57.             generator: {
58.                 // 输出图片名称
59.                 // [hash:10] hash 值取前10位
60.                 filename: "static/images/[hash:10][ext][query]"
61.             }
62.         }, {
63.             test: /\.ttf|worff?$/,
64.             generator: {
65.                 // [hash:10] hash 值取前10位
66.                 filename: "static/font/[hash:10][ext][query]"
67.             }
68.         }, {
69.             test: /\.video|audio|xsl|doc$/,
70.             generator: {
71.                 // [hash:10] hash 值取前10位
72.                 filename: "static/media/[hash:10][ext][query]"
73.             }
74.         }, {
75.             test: /\.js$/,
76.             exclude: /node_modules/,
77.             loader: "babel-loader"
78.         }]
79.     },
80.     // 插件
81.     plugins: [
82.         new ESLintPlugin({
83.             context: path.resolve(__dirname, "src")
84.         }),
85.         new HtmlWebpackPlugin({
86.             template: path.resolve(__dirname, "./index.html")
87.         })
88.     ],
89.     devServer: {
90.         // 启动服务器域名
91.         host: "localhost",
92.         port: "3000",
93.         open: true
94.     },
95.     // 模式
96.     mode: "development"
97. }

复制代码

生产环境搭建

• 根目录下创建文件夹config存放文件webpack.dev.js、webpack.prod.js
  
  
  
  • webpack.dev.js
    
  
  

1.     const ESLintPlugin = require('eslint-webpack-plugin');
2. const HtmlWebpackPlugin = require('html-webpack-plugin');
3. const path = require("path")
4. module.exports = {
5.     //入口
6.     entry: "./src/main.js",
7.     // 输出
8.     output: {
9.         // 文件的输出路径
10.         path: undefined,
11.         filename: "main.js",
12.         clean: true
13.     },
14.     // 加载器
15.     module: {
16.         // loader的配置
17.         rules: [{
18.             test: /\.css$/,
19.             use: [
20.                 // 执行的顺序，从右到左（从上到下）
21.                 "style-loader", // 将js中css通过创建style标签添加html文件中生效
22.                 "css-loader" // 将样式编译成commonjs的模块
23.             ]
24.         }, {
25.             test: /\.less$/,
26.             // loader:'xxx'只能使用单个loader
27.             // user 使用多个loader
28.             use: [
29.                 "style-loader",
30.                 "css-loader",
31.                 "less-loader" // 将Less 编译成css文件
32.             ]
33.         }, {
34.             test: /\.s[ac]ss$/,
35.             use: [
36.                 "style-loader",
37.                 "css-loader",
38.                 "sass-loader"
39.             ]
40.         }, {
41.             test: /\.styl$/,
42.             use: [
43.                 "style-loader",
44.                 "css-loader",
45.                 "stylus-loader"
46.             ]
47.         }, {
48.             test: /\.(png|jpe?g|gif|webp)$/,
49.             type: "asset",
50.             parser: {
51.                 dataUrlCondition: {
52.                     // 小于 10 kb 转base64
53.                     // 优点：减少请求数量，缺点：打包后的结果体积增大
54.                     maxSize: 20 * 1024,
55.                 }
56.             },
57.             generator: {
58.                 // 输出图片名称
59.                 // [hash:10] hash 值取前10位
60.                 filename: "static/images/[hash:10][ext][query]"
61.             }
62.         }, {
63.             test: /\.ttf|worff?$/,
64.             generator: {
65.                 // [hash:10] hash 值取前10位
66.                 filename: "static/font/[hash:10][ext][query]"
67.             }
68.         }, {
69.             test: /\.video|audio|xsl|doc$/,
70.             generator: {
71.                 // [hash:10] hash 值取前10位
72.                 filename: "static/media/[hash:10][ext][query]"
73.             }
74.         }, {
75.             test: /\.js$/,
76.             exclude: /node_modules/,
77.             loader: "babel-loader"
78.         }]
79.     },
80.     // 插件
81.     plugins: [
82.         new ESLintPlugin({
83.             context: path.resolve(__dirname, "../src")
84.         }),
85.         new HtmlWebpackPlugin({
86.             template: path.resolve(__dirname, "../index.html")
87.         })
88.     ],
89.     devServer: {
90.         // 启动服务器域名
91.         host: "localhost",
92.         port: "3000",
93.         open: true
94.     },
95.     // 模式
96.     mode: "development"
97. }

复制代码

• webpack.prod.js
  

1. const ESLintPlugin = require('eslint-webpack-plugin');
2. const HtmlWebpackPlugin = require('html-webpack-plugin');
3. const path = require("path")
4. module.exports = {
5.     //入口
6.     entry: "./src/main.js",
7.     // 输出
8.     output: {
9.         // 文件的输出路径
10.         path: path.resolve(__dirname, "dist"),
11.         filename: "main.js",
12.         clean: true
13.     },
14.     // 加载器
15.     module: {
16.         // loader的配置
17.         rules: [{
18.             test: /\.css$/,
19.             use: [
20.                 // 执行的顺序，从右到左（从上到下）
21.                 "style-loader", // 将js中css通过创建style标签添加html文件中生效
22.                 "css-loader" // 将样式编译成commonjs的模块
23.             ]
24.         }, {
25.             test: /\.less$/,
26.             // loader:'xxx'只能使用单个loader
27.             // user 使用多个loader
28.             use: [
29.                 "style-loader",
30.                 "css-loader",
31.                 "less-loader" // 将Less 编译成css文件
32.             ]
33.         }, {
34.             test: /\.s[ac]ss$/,
35.             use: [
36.                 "style-loader",
37.                 "css-loader",
38.                 "sass-loader"
39.             ]
40.         }, {
41.             test: /\.styl$/,
42.             use: [
43.                 "style-loader",
44.                 "css-loader",
45.                 "stylus-loader"
46.             ]
47.         }, {
48.             test: /\.(png|jpe?g|gif|webp)$/,
49.             type: "asset",
50.             parser: {
51.                 dataUrlCondition: {
52.                     // 小于 10 kb 转base64
53.                     // 优点：减少请求数量，缺点：打包后的结果体积增大
54.                     maxSize: 20 * 1024,
55.                 }
56.             },
57.             generator: {
58.                 // 输出图片名称
59.                 // [hash:10] hash 值取前10位
60.                 filename: "static/images/[hash:10][ext][query]"
61.             }
62.         }, {
63.             test: /\.ttf|worff?$/,
64.             generator: {
65.                 // [hash:10] hash 值取前10位
66.                 filename: "static/font/[hash:10][ext][query]"
67.             }
68.         }, {
69.             test: /\.video|audio|xsl|doc$/,
70.             generator: {
71.                 // [hash:10] hash 值取前10位
72.                 filename: "static/media/[hash:10][ext][query]"
73.             }
74.         }, {
75.             test: /\.js$/,
76.             exclude: /node_modules/,
77.             loader: "babel-loader"
78.         }]
79.     },
80.     // 插件
81.     plugins: [
82.         new ESLintPlugin({
83.             context: path.resolve(__dirname, "../src")
84.         }),
85.         new HtmlWebpackPlugin({
86.             template: path.resolve(__dirname, "../index.html")
87.         })
88.     ],
89.     // devServer: {
90.     //     // 启动服务器域名
91.     //     host: "localhost",
92.     //     port: "3000",
93.     //     open: true
94.     // },
95.     // 模式
96.     mode: "production"
97. }

复制代码

• 修改package.json
  

1. {
2.     "scripts": {
3.         "dev": "webpack server --config ./config/webpack.dev.js",
4.         "build": "webpack --config ./config/webpack.prod.js"
5.     },
6. }

复制代码

CSS处理

提取CSS成单独文件

CSS 文件如今是被打包到JS文件中，当JS文件加载时，会创建一个style标签来生成样式。
这样对网站来说，会出现闪屏现象，用户体验不太好。
我们应该将CSS文件提取，通过link标签引入。

• 下载包
  

1. npm i install mini-css-extract-plugin -D

复制代码

• 配置
  webpack.prod.js
  

1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3. module.exports = {
4.   plugins: [new MiniCssExtractPlugin({
6.   })],
7.   module: {
8.     rules: [
9.       {
10.         test: /\.css$/i,
11.         use: [MiniCssExtractPlugin.loader, "css-loader"],
12.       },
13.     ],
14.   },
15. };

复制代码

CSS兼容处理

• 下载包
  

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

复制代码

• 配置
  

1. const ESLintPlugin = require('eslint-webpack-plugin');
2. const HtmlWebpackPlugin = require('html-webpack-plugin');
3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4. const path = require("path")
5. function getStyleloader(pre) {
6.     return [
7.         MiniCssExtractPlugin.loader,
8.         "css-loader",
9.         {
10.             loader: "postcss-loader",
11.             options: {
12.                 postcssOptions: {
13.                     plugins: [
14.                         "postcss-preset-env"
15.                     ]
16.                 }
17.             }
18.         },
19.         pre
20.     ].filter(Boolean)
21. }
22. module.exports = {
23.     //入口
24.     entry: "./src/main.js",
25.     // 输出
26.     output: {
27.         // 文件的输出路径
28.         path: path.resolve(__dirname, "dist"),
29.         filename: "main.js",
30.         clean: true
31.     },
32.     // 加载器
33.     module: {
34.         // loader的配置
35.         rules: [{
36.             test: /\.css$/,
37.             use: getStyleloader()
38.         }, {
39.             test: /\.less$/,
40.             // loader:'xxx'只能使用单个loader
41.             // user 使用多个loader
42.             use: getStyleloader("less-loader")
43.         }, {
44.             test: /\.s[ac]ss$/,
45.             use: getStyleloader("sass-loader")
46.         }, {
47.             test: /\.styl$/,
48.             use: getStyleloader("stylus-loader")
49.         }, {
50.             test: /\.(png|jpe?g|gif|webp)$/,
51.             type: "asset",
52.             parser: {
53.                 dataUrlCondition: {
54.                     // 小于 10 kb 转base64
55.                     // 优点：减少请求数量，缺点：打包后的结果体积增大
56.                     maxSize: 20 * 1024,
57.                 }
58.             },
59.             generator: {
60.                 // 输出图片名称
61.                 // [hash:10] hash 值取前10位
62.                 filename: "static/images/[hash:10][ext][query]"
63.             }
64.         }, {
65.             test: /\.ttf|worff?$/,
66.             generator: {
67.                 // [hash:10] hash 值取前10位
68.                 filename: "static/font/[hash:10][ext][query]"
69.             }
70.         }, {
71.             test: /\.video|audio|xsl|doc$/,
72.             generator: {
73.                 // [hash:10] hash 值取前10位
74.                 filename: "static/media/[hash:10][ext][query]"
75.             }
76.         }, {
77.             test: /\.js$/,
78.             exclude: /node_modules/,
79.             loader: "babel-loader"
80.         }]
81.     },
82.     // 插件
83.     plugins: [
84.         new ESLintPlugin({
85.             context: path.resolve(__dirname, "../src")
86.         }),
87.         new HtmlWebpackPlugin({
88.             template: path.resolve(__dirname, "../index.html")
89.         }),
90.         new MiniCssExtractPlugin({
91.             filename: "static/css/index.css"
92.         })
93.     ],
94.     // devServer: {
95.     //     // 启动服务器域名
96.     //     host: "localhost",
97.     //     port: "3000",
98.     //     open: true
99.     // },
100.     // 模式
101.     mode: "production"
102. }

复制代码

• package.json
  

1. {
2.     "browserslist": [
3.         "last 2 version",
4.         "> 1%",
5.         "not dead"
6.     ]
7. }

复制代码

CSS压缩

• 下载包
  

1. npm i css-minimizer-webpack-plugin -D

复制代码

• 配置
  

1. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
2. module.exports = {
3.     plugins: [
4.         new CssMinimizerPlugin()
5.     ],
6. }

复制代码

html压缩

默认生产模式已经开启了html压缩和js压缩，不需要额外配置。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。