Webpack 5-基础配置-生产模式介绍，Css 处理，Html 压缩，总结

2023年05月06日 10:14 · 阅读(261) ·

依赖环境

名称 版本
操作系统 Windows 10 X64
Node.js Nodejs 16+
Webpack 8.5.0
Webpack 5-基础 -

来源

名称 版本
视频地址 尚硅谷Webpack5入门到原理（面试开发一条龙）
视频+资料下载 百度云资料
课件下载 Webpack5-课件.zip
Webpack 文档 https://webpack.docschina.org/concepts/

生产模式介绍

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

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

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

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

生产模式准备

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

1. 文件目录

  1. ├── webpack-test (项目根目录)
  2.     ├── config (Webpack配置文件目录)
  3.     │    ├── webpack.dev.js(开发模式配置文件)
  4.     │    └── webpack.prod.js(生产模式配置文件)
  5.     ├── node_modules (下载包存放目录)
  6.     ├── src (项目源码目录，除了html其他都在src里面)
  7.     │    └── 略
  8.     ├── public (项目html文件)
  9.     │    └── index.html
  10.     ├── .eslintrc.js(Eslint配置文件)
  11.     ├── babel.config.js(Babel配置文件)
  12.     └── package.json (包的依赖管理配置文件)

2. 修改 webpack.dev.js

因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件

  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  5. module.exports = {
  6.   entry: "./src/main.js",
  7.   output: {
  8.     path: undefined, // 开发模式没有输出，不需要指定输出目录
  9.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  10.     // clean: true, // 开发模式没有输出，不需要清空输出结果
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         // 用来匹配 .css 结尾的文件
  16.         test: /\.css$/,
  17.         // use 数组里面 Loader 执行顺序是从右到左
  18.         use: ["style-loader", "css-loader"],
  19.       },
  20.       {
  21.         test: /\.less$/,
  22.         use: ["style-loader", "css-loader", "less-loader"],
  23.       },
  24.       {
  25.         test: /\.s[ac]ss$/,
  26.         use: ["style-loader", "css-loader", "sass-loader"],
  27.       },
  28.       {
  29.         test: /\.styl$/,
  30.         use: ["style-loader", "css-loader", "stylus-loader"],
  31.       },
  32.       {
  33.         test: /\.(png|jpe?g|gif|webp)$/,
  34.         type: "asset",
  35.         parser: {
  36.           dataUrlCondition: {
  37.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  38.           },
  39.         },
  40.         generator: {
  41.           // 将图片文件输出到 static/imgs 目录中
  42.           // 将图片文件命名 [hash:8][ext][query]
  43.           // [hash:8]: hash值取8位
  44.           // [ext]: 使用之前的文件扩展名
  45.           // [query]: 添加之前的query参数
  46.           filename: "static/imgs/[hash:8][ext][query]",
  47.         },
  48.       },
  49.       {
  50.         test: /\.(ttf|woff2?)$/,
  51.         type: "asset/resource",
  52.         generator: {
  53.           filename: "static/media/[hash:8][ext][query]",
  54.         },
  55.       },
  56.       {
  57.         test: /\.js$/,
  58.         exclude: /node_modules/, // 排除node_modules代码不编译
  59.         loader: "babel-loader",
  60.       },
  61.     ],
  62.   },
  63.   plugins: [
  64.     new ESLintWebpackPlugin({
  65.       // 指定检查文件的根目录
  66.       context: path.resolve(__dirname, "../src"),
  67.     }),
  68.     new HtmlWebpackPlugin({
  69.       // 以 public/index.html 为模板创建文件
  70.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  71.       template: path.resolve(__dirname, "../public/index.html"),
  72.     }),
  73.   ],
  74.   // 其他省略
  75.   devServer: {
  76.     host: "localhost", // 启动服务器域名
  77.     port: "3000", // 启动服务器端口号
  78.     open: true, // 是否自动打开浏览器
  79.   },
  80.   mode: "development",
  81. };

运行开发模式的指令：

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

3. 修改 webpack.prod.js

  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  5. module.exports = {
  6.   entry: "./src/main.js",
  7.   output: {
  8.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  9.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  10.     clean: true,
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         // 用来匹配 .css 结尾的文件
  16.         test: /\.css$/,
  17.         // use 数组里面 Loader 执行顺序是从右到左
  18.         use: ["style-loader", "css-loader"],
  19.       },
  20.       {
  21.         test: /\.less$/,
  22.         use: ["style-loader", "css-loader", "less-loader"],
  23.       },
  24.       {
  25.         test: /\.s[ac]ss$/,
  26.         use: ["style-loader", "css-loader", "sass-loader"],
  27.       },
  28.       {
  29.         test: /\.styl$/,
  30.         use: ["style-loader", "css-loader", "stylus-loader"],
  31.       },
  32.       {
  33.         test: /\.(png|jpe?g|gif|webp)$/,
  34.         type: "asset",
  35.         parser: {
  36.           dataUrlCondition: {
  37.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  38.           },
  39.         },
  40.         generator: {
  41.           // 将图片文件输出到 static/imgs 目录中
  42.           // 将图片文件命名 [hash:8][ext][query]
  43.           // [hash:8]: hash值取8位
  44.           // [ext]: 使用之前的文件扩展名
  45.           // [query]: 添加之前的query参数
  46.           filename: "static/imgs/[hash:8][ext][query]",
  47.         },
  48.       },
  49.       {
  50.         test: /\.(ttf|woff2?)$/,
  51.         type: "asset/resource",
  52.         generator: {
  53.           filename: "static/media/[hash:8][ext][query]",
  54.         },
  55.       },
  56.       {
  57.         test: /\.js$/,
  58.         exclude: /node_modules/, // 排除node_modules代码不编译
  59.         loader: "babel-loader",
  60.       },
  61.     ],
  62.   },
  63.   plugins: [
  64.     new ESLintWebpackPlugin({
  65.       // 指定检查文件的根目录
  66.       context: path.resolve(__dirname, "../src"),
  67.     }),
  68.     new HtmlWebpackPlugin({
  69.       // 以 public/index.html 为模板创建文件
  70.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  71.       template: path.resolve(__dirname, "../public/index.html"),
  72.     }),
  73.   ],
  74.   // devServer: {
  75.   //   host: "localhost", // 启动服务器域名
  76.   //   port: "3000", // 启动服务器端口号
  77.   //   open: true, // 是否自动打开浏览器
  78.   // },
  79.   mode: "production",
  80. };

运行生产模式的指令：

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

4. 配置运行指令

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

  1. // package.json
  2. {
  3.   // 其他省略
  4.   "scripts": {
  5.     "start": "npm run dev",
  6.     "dev": "npx webpack serve --config ./config/webpack.dev.js",
  7.     "build": "npx webpack --config ./config/webpack.prod.js"
  8.   }
  9. }

以后启动指令：

  • 开发模式：npm start 或 npm run dev
  • 生产模式：npm run build

Css 处理

提取 Css 成单独文件

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

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

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

1. 下载包

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

2. 配置

  • webpack.prod.js
  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. module.exports = {
  7.   entry: "./src/main.js",
  8.   output: {
  9.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  10.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  11.     clean: true,
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         // 用来匹配 .css 结尾的文件
  17.         test: /\.css$/,
  18.         // use 数组里面 Loader 执行顺序是从右到左
  19.         use: [MiniCssExtractPlugin.loader, "css-loader"],
  20.       },
  21.       {
  22.         test: /\.less$/,
  23.         use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
  24.       },
  25.       {
  26.         test: /\.s[ac]ss$/,
  27.         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
  28.       },
  29.       {
  30.         test: /\.styl$/,
  31.         use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
  32.       },
  33.       {
  34.         test: /\.(png|jpe?g|gif|webp)$/,
  35.         type: "asset",
  36.         parser: {
  37.           dataUrlCondition: {
  38.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  39.           },
  40.         },
  41.         generator: {
  42.           // 将图片文件输出到 static/imgs 目录中
  43.           // 将图片文件命名 [hash:8][ext][query]
  44.           // [hash:8]: hash值取8位
  45.           // [ext]: 使用之前的文件扩展名
  46.           // [query]: 添加之前的query参数
  47.           filename: "static/imgs/[hash:8][ext][query]",
  48.         },
  49.       },
  50.       {
  51.         test: /\.(ttf|woff2?)$/,
  52.         type: "asset/resource",
  53.         generator: {
  54.           filename: "static/media/[hash:8][ext][query]",
  55.         },
  56.       },
  57.       {
  58.         test: /\.js$/,
  59.         exclude: /node_modules/, // 排除node_modules代码不编译
  60.         loader: "babel-loader",
  61.       },
  62.     ],
  63.   },
  64.   plugins: [
  65.     new ESLintWebpackPlugin({
  66.       // 指定检查文件的根目录
  67.       context: path.resolve(__dirname, "../src"),
  68.     }),
  69.     new HtmlWebpackPlugin({
  70.       // 以 public/index.html 为模板创建文件
  71.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  72.       template: path.resolve(__dirname, "../public/index.html"),
  73.     }),
  74.     // 提取css成单独文件
  75.     new MiniCssExtractPlugin({
  76.       // 定义输出文件名和目录
  77.       filename: "static/css/main.css",
  78.     }),
  79.   ],
  80.   // devServer: {
  81.   //   host: "localhost", // 启动服务器域名
  82.   //   port: "3000", // 启动服务器端口号
  83.   //   open: true, // 是否自动打开浏览器
  84.   // },
  85.   mode: "production",
  86. };

3. 运行指令

  1. npm run build

Css 兼容性处理

1. 下载包

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

2. 配置

  • webpack.prod.js
  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. module.exports = {
  7.   entry: "./src/main.js",
  8.   output: {
  9.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  10.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  11.     clean: true,
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         // 用来匹配 .css 结尾的文件
  17.         test: /\.css$/,
  18.         // use 数组里面 Loader 执行顺序是从右到左
  19.         use: [
  20.           MiniCssExtractPlugin.loader,
  21.           "css-loader",
  22.           {
  23.             loader: "postcss-loader",
  24.             options: {
  25.               postcssOptions: {
  26.                 plugins: [
  27.                   "postcss-preset-env", // 能解决大多数样式兼容性问题
  28.                 ],
  29.               },
  30.             },
  31.           },
  32.         ],
  33.       },
  34.       {
  35.         test: /\.less$/,
  36.         use: [
  37.           MiniCssExtractPlugin.loader,
  38.           "css-loader",
  39.           {
  40.             loader: "postcss-loader",
  41.             options: {
  42.               postcssOptions: {
  43.                 plugins: [
  44.                   "postcss-preset-env", // 能解决大多数样式兼容性问题
  45.                 ],
  46.               },
  47.             },
  48.           },
  49.           "less-loader",
  50.         ],
  51.       },
  52.       {
  53.         test: /\.s[ac]ss$/,
  54.         use: [
  55.           MiniCssExtractPlugin.loader,
  56.           "css-loader",
  57.           {
  58.             loader: "postcss-loader",
  59.             options: {
  60.               postcssOptions: {
  61.                 plugins: [
  62.                   "postcss-preset-env", // 能解决大多数样式兼容性问题
  63.                 ],
  64.               },
  65.             },
  66.           },
  67.           "sass-loader",
  68.         ],
  69.       },
  70.       {
  71.         test: /\.styl$/,
  72.         use: [
  73.           MiniCssExtractPlugin.loader,
  74.           "css-loader",
  75.           {
  76.             loader: "postcss-loader",
  77.             options: {
  78.               postcssOptions: {
  79.                 plugins: [
  80.                   "postcss-preset-env", // 能解决大多数样式兼容性问题
  81.                 ],
  82.               },
  83.             },
  84.           },
  85.           "stylus-loader",
  86.         ],
  87.       },
  88.       {
  89.         test: /\.(png|jpe?g|gif|webp)$/,
  90.         type: "asset",
  91.         parser: {
  92.           dataUrlCondition: {
  93.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  94.           },
  95.         },
  96.         generator: {
  97.           // 将图片文件输出到 static/imgs 目录中
  98.           // 将图片文件命名 [hash:8][ext][query]
  99.           // [hash:8]: hash值取8位
  100.           // [ext]: 使用之前的文件扩展名
  101.           // [query]: 添加之前的query参数
  102.           filename: "static/imgs/[hash:8][ext][query]",
  103.         },
  104.       },
  105.       {
  106.         test: /\.(ttf|woff2?)$/,
  107.         type: "asset/resource",
  108.         generator: {
  109.           filename: "static/media/[hash:8][ext][query]",
  110.         },
  111.       },
  112.       {
  113.         test: /\.js$/,
  114.         exclude: /node_modules/, // 排除node_modules代码不编译
  115.         loader: "babel-loader",
  116.       },
  117.     ],
  118.   },
  119.   plugins: [
  120.     new ESLintWebpackPlugin({
  121.       // 指定检查文件的根目录
  122.       context: path.resolve(__dirname, "../src"),
  123.     }),
  124.     new HtmlWebpackPlugin({
  125.       // 以 public/index.html 为模板创建文件
  126.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  127.       template: path.resolve(__dirname, "../public/index.html"),
  128.     }),
  129.     // 提取css成单独文件
  130.     new MiniCssExtractPlugin({
  131.       // 定义输出文件名和目录
  132.       filename: "static/css/main.css",
  133.     }),
  134.   ],
  135.   // devServer: {
  136.   //   host: "localhost", // 启动服务器域名
  137.   //   port: "3000", // 启动服务器端口号
  138.   //   open: true, // 是否自动打开浏览器
  139.   // },
  140.   mode: "production",
  141. };

3. 控制兼容性

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

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

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

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

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

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

4. 合并配置

  • webpack.prod.js
  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. // 获取处理样式的Loaders
  7. const getStyleLoaders = (preProcessor) => {
  8.   return [
  9.     MiniCssExtractPlugin.loader,
  10.     "css-loader",
  11.     {
  12.       loader: "postcss-loader",
  13.       options: {
  14.         postcssOptions: {
  15.           plugins: [
  16.             "postcss-preset-env", // 能解决大多数样式兼容性问题
  17.           ],
  18.         },
  19.       },
  20.     },
  21.     preProcessor,
  22.   ].filter(Boolean);
  23. };
  25. module.exports = {
  26.   entry: "./src/main.js",
  27.   output: {
  28.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  29.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  30.     clean: true,
  31.   },
  32.   module: {
  33.     rules: [
  34.       {
  35.         // 用来匹配 .css 结尾的文件
  36.         test: /\.css$/,
  37.         // use 数组里面 Loader 执行顺序是从右到左
  38.         use: getStyleLoaders(),
  39.       },
  40.       {
  41.         test: /\.less$/,
  42.         use: getStyleLoaders("less-loader"),
  43.       },
  44.       {
  45.         test: /\.s[ac]ss$/,
  46.         use: getStyleLoaders("sass-loader"),
  47.       },
  48.       {
  49.         test: /\.styl$/,
  50.         use: getStyleLoaders("stylus-loader"),
  51.       },
  52.       {
  53.         test: /\.(png|jpe?g|gif|webp)$/,
  54.         type: "asset",
  55.         parser: {
  56.           dataUrlCondition: {
  57.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  58.           },
  59.         },
  60.         generator: {
  61.           // 将图片文件输出到 static/imgs 目录中
  62.           // 将图片文件命名 [hash:8][ext][query]
  63.           // [hash:8]: hash值取8位
  64.           // [ext]: 使用之前的文件扩展名
  65.           // [query]: 添加之前的query参数
  66.           filename: "static/imgs/[hash:8][ext][query]",
  67.         },
  68.       },
  69.       {
  70.         test: /\.(ttf|woff2?)$/,
  71.         type: "asset/resource",
  72.         generator: {
  73.           filename: "static/media/[hash:8][ext][query]",
  74.         },
  75.       },
  76.       {
  77.         test: /\.js$/,
  78.         exclude: /node_modules/, // 排除node_modules代码不编译
  79.         loader: "babel-loader",
  80.       },
  81.     ],
  82.   },
  83.   plugins: [
  84.     new ESLintWebpackPlugin({
  85.       // 指定检查文件的根目录
  86.       context: path.resolve(__dirname, "../src"),
  87.     }),
  88.     new HtmlWebpackPlugin({
  89.       // 以 public/index.html 为模板创建文件
  90.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  91.       template: path.resolve(__dirname, "../public/index.html"),
  92.     }),
  93.     // 提取css成单独文件
  94.     new MiniCssExtractPlugin({
  95.       // 定义输出文件名和目录
  96.       filename: "static/css/main.css",
  97.     }),
  98.   ],
  99.   // devServer: {
  100.   //   host: "localhost", // 启动服务器域名
  101.   //   port: "3000", // 启动服务器端口号
  102.   //   open: true, // 是否自动打开浏览器
  103.   // },
  104.   mode: "production",
  105. };

5. 运行指令

  1. npm run build

Css 压缩

1. 下载包

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

2. 配置

  • webpack.prod.js
  1. const path = require("path");
  2. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  5. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  7. // 获取处理样式的Loaders
  8. const getStyleLoaders = (preProcessor) => {
  9.   return [
  10.     MiniCssExtractPlugin.loader,
  11.     "css-loader",
  12.     {
  13.       loader: "postcss-loader",
  14.       options: {
  15.         postcssOptions: {
  16.           plugins: [
  17.             "postcss-preset-env", // 能解决大多数样式兼容性问题
  18.           ],
  19.         },
  20.       },
  21.     },
  22.     preProcessor,
  23.   ].filter(Boolean);
  24. };
  26. module.exports = {
  27.   entry: "./src/main.js",
  28.   output: {
  29.     path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
  30.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  31.     clean: true,
  32.   },
  33.   module: {
  34.     rules: [
  35.       {
  36.         // 用来匹配 .css 结尾的文件
  37.         test: /\.css$/,
  38.         // use 数组里面 Loader 执行顺序是从右到左
  39.         use: getStyleLoaders(),
  40.       },
  41.       {
  42.         test: /\.less$/,
  43.         use: getStyleLoaders("less-loader"),
  44.       },
  45.       {
  46.         test: /\.s[ac]ss$/,
  47.         use: getStyleLoaders("sass-loader"),
  48.       },
  49.       {
  50.         test: /\.styl$/,
  51.         use: getStyleLoaders("stylus-loader"),
  52.       },
  53.       {
  54.         test: /\.(png|jpe?g|gif|webp)$/,
  55.         type: "asset",
  56.         parser: {
  57.           dataUrlCondition: {
  58.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
  59.           },
  60.         },
  61.         generator: {
  62.           // 将图片文件输出到 static/imgs 目录中
  63.           // 将图片文件命名 [hash:8][ext][query]
  64.           // [hash:8]: hash值取8位
  65.           // [ext]: 使用之前的文件扩展名
  66.           // [query]: 添加之前的query参数
  67.           filename: "static/imgs/[hash:8][ext][query]",
  68.         },
  69.       },
  70.       {
  71.         test: /\.(ttf|woff2?)$/,
  72.         type: "asset/resource",
  73.         generator: {
  74.           filename: "static/media/[hash:8][ext][query]",
  75.         },
  76.       },
  77.       {
  78.         test: /\.js$/,
  79.         exclude: /node_modules/, // 排除node_modules代码不编译
  80.         loader: "babel-loader",
  81.       },
  82.     ],
  83.   },
  84.   plugins: [
  85.     new ESLintWebpackPlugin({
  86.       // 指定检查文件的根目录
  87.       context: path.resolve(__dirname, "../src"),
  88.     }),
  89.     new HtmlWebpackPlugin({
  90.       // 以 public/index.html 为模板创建文件
  91.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
  92.       template: path.resolve(__dirname, "../public/index.html"),
  93.     }),
  94.     // 提取css成单独文件
  95.     new MiniCssExtractPlugin({
  96.       // 定义输出文件名和目录
  97.       filename: "static/css/main.css",
  98.     }),
  99.     // css压缩
  100.     new CssMinimizerPlugin(),
  101.   ],
  102.   // devServer: {
  103.   //   host: "localhost", // 启动服务器域名
  104.   //   port: "3000", // 启动服务器端口号
  105.   //   open: true, // 是否自动打开浏览器
  106.   // },
  107.   mode: "production",
  108. };

3. 运行指令

  1. npm run build

html 压缩

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

不需要额外进行配置

总结

本章节我们学会了 Webpack 基本使用，掌握了以下功能：

1.两种开发模式

  • 开发模式：代码能编译自动化运行
  • 生产模式：代码编译优化输出

2.Webpack 基本功能

  • 开发模式：可以编译 ES Module 语法
  • 生产模式：可以编译 ES Module 语法，压缩 js 代码

3.Webpack 配置文件

  • 5 个核心概念
    • entry
    • output
    • loader
    • plugins
    • mode
  • devServer 配置

4.Webpack 脚本指令用法

  • webpack 直接打包输出
  • webpack serve 启动开发服务器，内存编译打包没有输出