• Node.js与webpack（三）

    上一节：Node.js与Webpack笔记（二）-CSDN博客

    从0来一遍（webpack项目）

    将之前的webpack 的纯开发配置，重新创建空白项目，重新做一遍，捋一遍思路防止加入生产模式时候弄混

    1.创建文件夹，VSCode打开文件夹

    2.cmd -> npm init -y

    3.根据需求安装一堆依赖

    1. "devDependencies": {
    2.     "@babel/core": "^7.24.0",
    3.     "@babel/preset-env": "^7.24.0",
    4.     "babel-loader": "^9.1.3",
    5.     "css-loader": "^6.10.0",
    6.     "eslint": "^8.57.0",
    7.     "eslint-webpack-plugin": "^4.0.1",
    8.     "html-webpack-plugin": "^5.6.0",
    9.     "less-loader": "^12.2.0",
    10.     "sass-loader": "^14.1.1",
    11.     "style-loader": "^3.3.4",
    12.     "stylus-loader": "^8.1.0",
    13.     "webpack": "^5.90.3",
    14.     "webpack-cli": "^5.1.4",
    15.     "webpack-dev-server": "^5.0.2"
    16.   }
    使用webpack5：
    npm i webpack webpack-cli -D

    处理css|less|sass|scss|stylus资源：
    npm i style-loader css-loader less-style sass-loader stylus-loader -D

    处理图片资源：

    无，不需要依赖

    过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

    现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

    处理图形文字、音视频资源：

    无，不需要依赖

    Eslint检查JS、VUE、JSX语法格式：
    npm i eslint eslint-webpack-plugin --save-dev

    Babel处理兼容问题：
    npm install -D babel-loader @babel/core @babel/preset-env

    处理HTML资源：

    以原HTML的结构自动创建HTML，自动引入所有的出口js文件还有CSS等

    npm i html-webpack-plugin -D

    webpack提供的小型服务器：
    npm i webpack-dev-server -D

    4.手动创建这些文件夹（暂时手动）

    5.写(粘贴)几个配置文件
    webpack.config.js

    配置文件内容：

    1.修改打包入口和出口路径

    2.打包自动清空资源

    3.处理css、less、sass、scss、stylus样式资源

    4.处理文字图标、音视频资源

    5.处理图片资源

    6.Babel：处理JS文件（还需要单独配置文件）

    7.Eslint：检查js语法格式（还需要单独配置文件）

    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // webpack默认支持的是CommonJS语法
    11. module.exports = {
    12.     // 入口，相对路径
    13.     entry: 'src/main.js',
    14.     // 输出
    15.     output: {
    16.         // __dirname获取当前项目根目录的绝对路径
    17.         // dist 为输出目录，自动创建
    18.         path: path.resolve(__dirname, "dist"),
    19.         // 出口文件名，dist下的
    20.         filename: "js/main.js",
    21.         // 打包时自动清空上次打包资源
    22.         clean: true,
    23.     },
    24.     // loader加载器
    25.     module: {
    26.         // 写正则作为匹配规则
    27.         rules: [
    28.             // 处理css资源
    29.             {
    30.                 // 正则匹配一个 以 .css结尾的文件
    31.                 test: /\.css$/,
    32.                 // loader在数组中的执行顺序是从右到左
    33.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    34.                 // css-loader将css资源编译成commonJS的模板到js中
    35.                 use: ['style-loader', 'css-loader'],
    36.             },
    37.             // 处理less资源
    38.             {
    39.                 test: /\.less$/,
    40.                 use: ['style-loader', "css-loader", "less-loader"],
    41.             },
    42.             // 处理sass 和 scss资源
    43.             {
    44.                 test: /\.s[ac]ss$/,
    45.                 use: ["style-loader", "css-loader", "sass-loader"],
    46.             },
    47.             // 处理stylus资源
    48.             {
    49.                 test: /\.styl$/,
    50.                 use: ["style-loader", "css-loader", "stylus-loader"],
    51.             },
    52.             // 处理媒体图片资源
    53.             {
    54.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    55.                 // asset提供dataUrl来处理小图片转base64编码
    56.                 type: "asset",
    57.                 parser: {
    58.                     // 小于 10k的图片，进行转字符串处理
    59.                     // 体积略大一点，换来的是减少一次资源请求
    60.                     dataUrlCondition: {
    61.                         maxSize: 10 * 1024, 
    62.                     },
    63.                     // 修改图片资源输出路径, dist下的
    64.                     // hash: 8，命名只取生成的hash值的前8位
    65.                     // ext: 后缀名
    66.                     // query: 请求头查询字符串（可选）
    67.                     generator: {
    68.                         filename: 'static/img/[hash: 8][ext][query]',
    69.                     },
    70.                 }
    71.             },
    72.             // 处理字体图标文件，以及音视频文件
    73.             {
    74.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    75.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    76.                 // 修改媒体资源输出路径，dist下的
    77.                 generator: {
    78.                     filename: 'static/media/[hash: 8][ext][query]',
    79.                 },
    80.             },
    81.             // 处理JS文件，JS解析器：Babel
    82.             {
    83.                 test: /\.js$/,
    84.                 exclude: /node_modules/, // 排除第三方js文件
    85.                 loader: 'babel-loader',
    86.             },
    87.         ]
    88.     },
    89.     // 插件
    90.     plugins: [
    91.         // plugin的配置
    92.         new ESLintPlugin({
    93.             // context指定需要检查的文件根目录，一般只检查src下的文件
    94.             context: path.resolve(__dirname, "src"),
    95.         }),
    96.         new HtmlWebpackPlugin({
    97.             // 以public/index.html为模板创建文件
    98.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    99.             template: path.resolve(__dirname, 'public/index.html'),
    100.         }),
    101.     ],
    102.     // 开发服务器配置, webpack官方提供的小型服务器
    103.     devServer: {
    104.         host: 'localhost', // 启动服务器域名
    105.         port: "3030", // 启动服务器端口号
    106.         open: true, // 是否自动打开浏览器
    107.     },
    108.     // 模式
    109.     mode: "development", // 选择开发模式
    110. }
    111.  
    112.  
    113.  
    114.
    手动创建配置文件需要的文件 
    • 入口文件.js
    • HTML模板插件需要的模板HTML

    .eslintrc.js

    此时eslint其实已经可以用了，每次打包编译时候才开是检测一次代码格式，如果需要实时检测，后面会使用VSCode插件

    1. module.exports ={
    2.     // 继承Eslint官方写好的 规则，还是比较主流的
    3.     extends: ["eslint:recommended"], // 这里不能加任何空格
    4.     env: {
    5.         node: true, // 启用node中的全局变量（五大核心那些东西）
    6.         browser: true, // 启用浏览器中全员变量 (window，console那些东西)
    7.     },
    8.     parserOptions: {
    9.         ecmaVersion: 6, // ES语法版本，支持ES6
    10.         sourceType: "module", // ES 模块化
    11.     },
    12.     rules: {
    13.         "no-var": 2, //不能使用var定义变量
    14.     }
    15. }
    babel.config.js

    此时，webpack有了babel插件的帮助，已经可以处理ES6语法了，类似于将箭头函数转换成function(){};

    1. module.exports = {
    2.     // @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
    3.     // @babel/preset-react：一个用来编译 React jsx 语法的预设
    4.     // @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
    5.     presets: ["@babel/preset-env"],
    6. }
    6.加一个插件
    VSCode-ESLint

    这个插件可以实时检测代码格式，就不用编译的时候才去报错了

    再给插件写一个配置文件

    但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们开发时候只需要检查 src 下面自己写的源代码，不需要检查 dist 下面的文件。

    eslintignore有可能不生效，有一个办法是在.eslintrc.js中写上：

    网上也有其他办法，但是暂时也不会用

    VSCode ESLint 插件 .eslintignore 文件不生效原因[转] – 后除 (mazey.net)

    7.使用git
    初始化仓库

    创建.gitignore文件
    1. # 忽略 npm下载的第三方包
    2. node_modules
    3. # 忽略分发文件夹
    4. dist
    5. # 忽略VSCode配置文件
    6. .vscode
    7. # 忽略秘钥文件
    8. *.pem
    9. *cer
    10. # 忽略日志文件
    11. *.log
    12. # 忽略.history历史文件夹（可能是一个插件生成的）
    13. .history

    生产模式介绍

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

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

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

    1. 优化代码运行性能
    2. 优化代码打包速度
    • 之前的目录结构

    • 现在的目录

    配置文件

    • webpack.dev.js

    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // webpack默认支持的是CommonJS语法
    11. module.exports = {
    12.     // 入口，相对路径，从项目根目录为起点，这里必须加上 ./
    13.     entry: './src/main.js',
    14.     // 输出
    15.     output: {
    16.         // __dirname获取当前项目根目录的绝对路径
    17.         path: undefined, // 开发模式不输出
    18.         // 出口文件名，dist下的
    19.         filename: "static/js/main.js",
    20.         // 打包时自动清空上次打包资源
    21.         // clean: true, // 开发模式没有输出，不清空
    22.     },
    23.     // loader加载器
    24.     module: {
    25.         // 写正则作为匹配规则
    26.         rules: [
    27.             // 处理css资源
    28.             {
    29.                 // 正则匹配一个 以 .css结尾的文件
    30.                 test: /\.css$/,
    31.                 // loader在数组中的执行顺序是从右到左
    32.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    33.                 // css-loader将css资源编译成commonJS的模板到js中
    34.                 use: ['style-loader', 'css-loader'],
    35.             },
    36.             // 处理less资源
    37.             {
    38.                 test: /\.less$/,
    39.                 use: ['style-loader', "css-loader", "less-loader"],
    40.             },
    41.             // 处理sass 和 scss资源
    42.             {
    43.                 test: /\.s[ac]ss$/,
    44.                 use: ["style-loader", "css-loader", "sass-loader"],
    45.             },
    46.             // 处理stylus资源
    47.             {
    48.                 test: /\.styl$/,
    49.                 use: ["style-loader", "css-loader", "stylus-loader"],
    50.             },
    51.             // 处理媒体图片资源
    52.             {
    53.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    54.                 // asset提供dataUrl来处理小图片转base64编码
    55.                 type: "asset",
    56.                 parser: {
    57.                     // 小于 10k的图片，进行转字符串处理
    58.                     // 体积略大一点，换来的是减少一次资源请求
    59.                     dataUrlCondition: {
    60.                         maxSize: 10 * 1024, 
    61.                     },
    62.                     // 修改图片资源输出路径, dist下的
    63.                     // hash: 8，命名只取生成的hash值的前8位
    64.                     // ext: 后缀名
    65.                     // query: 请求头查询字符串（可选）
    66.                     generator: {
    67.                         filename: 'static/img/[hash: 8][ext][query]',
    68.                     },
    69.                 }
    70.             },
    71.             // 处理字体图标文件，以及音视频文件
    72.             {
    73.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    74.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    75.                 // 修改媒体资源输出路径，dist下的
    76.                 generator: {
    77.                     filename: 'static/media/[hash: 8][ext][query]',
    78.                 },
    79.             },
    80.             // 处理JS文件，JS解析器：Babel
    81.             {
    82.                 test: /\.js$/,
    83.                 exclude: /node_modules/, // 排除第三方js文件
    84.                 loader: 'babel-loader',
    85.             },
    86.         ]
    87.     },
    88.     // 插件
    89.     plugins: [
    90.         // plugin的配置
    91.         new ESLintPlugin({
    92.             // context指定需要检查的文件根目录，一般只检查src下的文件
    93.             context: path.resolve(__dirname, "../src"),
    94.         }),
    95.         new HtmlWebpackPlugin({
    96.             // 以public/index.html为模板创建文件
    97.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    98.             template: path.resolve(__dirname, '../public/index.html'),
    99.         }),
    100.     ],
    101.     // 开发服务器配置, webpack官方提供的小型服务器
    102.     devServer: {
    103.         host: 'localhost', // 启动服务器域名
    104.         port: "3030", // 启动服务器端口号
    105.         open: true, // 是否自动打开浏览器
    106.     },
    107.     // 模式
    108.     mode: "development", // 选择开发模式
    109. }
    110.

     运行指令

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

     

    • webpack.prod.js

    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // webpack默认支持的是CommonJS语法
    11. module.exports = {
    12.     // 入口，相对路径
    13.     entry: './src/main.js',
    14.     // 输出
    15.     output: {
    16.         // __dirname获取当前项目根目录的绝对路径
    17.         // dist 为输出目录，自动创建
    18.         path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    19.         // 出口文件名，dist下的
    20.         filename: "static/js/main.js",
    21.         // 打包时自动清空上次打包资源
    22.         clean: true,
    23.     },
    24.     // loader加载器
    25.     module: {
    26.         // 写正则作为匹配规则
    27.         rules: [
    28.             // 处理css资源
    29.             {
    30.                 // 正则匹配一个 以 .css结尾的文件
    31.                 test: /\.css$/,
    32.                 // loader在数组中的执行顺序是从右到左
    33.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    34.                 // css-loader将css资源编译成commonJS的模板到js中
    35.                 use: ['style-loader', 'css-loader'],
    36.             },
    37.             // 处理less资源
    38.             {
    39.                 test: /\.less$/,
    40.                 use: ['style-loader', "css-loader", "less-loader"],
    41.             },
    42.             // 处理sass 和 scss资源
    43.             {
    44.                 test: /\.s[ac]ss$/,
    45.                 use: ["style-loader", "css-loader", "sass-loader"],
    46.             },
    47.             // 处理stylus资源
    48.             {
    49.                 test: /\.styl$/,
    50.                 use: ["style-loader", "css-loader", "stylus-loader"],
    51.             },
    52.             // 处理媒体图片资源
    53.             {
    54.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    55.                 // asset提供dataUrl来处理小图片转base64编码
    56.                 type: "asset",
    57.                 parser: {
    58.                     // 小于 10k的图片，进行转字符串处理
    59.                     // 体积略大一点，换来的是减少一次资源请求
    60.                     dataUrlCondition: {
    61.                         maxSize: 10 * 1024, 
    62.                     },
    63.                     // 修改图片资源输出路径, dist下的
    64.                     // hash: 8，命名只取生成的hash值的前8位
    65.                     // ext: 后缀名
    66.                     // query: 请求头查询字符串（可选）
    67.                     generator: {
    68.                         filename: 'static/img/[hash: 8][ext][query]',
    69.                     },
    70.                 }
    71.             },
    72.             // 处理字体图标文件，以及音视频文件
    73.             {
    74.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    75.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    76.                 // 修改媒体资源输出路径，dist下的
    77.                 generator: {
    78.                     filename: 'static/media/[hash: 8][ext][query]',
    79.                 },
    80.             },
    81.             // 处理JS文件，JS解析器：Babel
    82.             {
    83.                 test: /\.js$/,
    84.                 exclude: /node_modules/, // 排除第三方js文件
    85.                 loader: 'babel-loader',
    86.             },
    87.         ]
    88.     },
    89.     // 插件
    90.     plugins: [
    91.         // plugin的配置
    92.         new ESLintPlugin({
    93.             // context指定需要检查的文件根目录，一般只检查src下的文件
    94.             context: path.resolve(__dirname, "../src"),
    95.         }),
    96.         new HtmlWebpackPlugin({
    97.             // 以public/index.html为模板创建文件
    98.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    99.             template: path.resolve(__dirname, '../public/index.html'),
    100.         }),
    101.     ],
    102.     // 开发服务器配置, webpack官方提供的小型服务器
    103.     // devServer: {
    104.     //     host: 'localhost', // 启动服务器域名
    105.     //     port: "3030", // 启动服务器端口号
    106.     //     open: true, // 是否自动打开浏览器
    107.     // },
    108.     // 模式
    109.     mode: "production", // 选择开发模式
    110. }
    111.  
    112.  
    113.  
    114.

     运行指令

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

     

    报错的点

    在entry处，必须加上 ./，在我的印象里，./src 和 src没区别啊，但是这里必须加上 ./

    eslint配置文件中，继承官方规则这里，不能加任何空格，比如【eslint: recommended】

    配置快速运行指令

    在script中:

    1. "start": "npm run dev",
    2.     "dev": "npx webpack serve --config ./config/webpack.dev.js",
    3.     "build": "npx webpack --config ./config/webpack.prod.js"

    npm start = npm run dev = npx webpack serve

    以后启动指令：

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

    CSS处理（还需要额外依赖）

    1.提取成独立的css文件
    安装依赖
    npm i mini-css-extract-plugin -D

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

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

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

    • webpack.prod.js
    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // 处理CSS从默认style标签 到 link标签
    11. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    12.  
    13. // webpack默认支持的是CommonJS语法
    14. module.exports = {
    15.     // 入口，相对路径
    16.     entry: './src/main.js',
    17.     // 输出
    18.     output: {
    19.         // __dirname获取当前项目根目录的绝对路径
    20.         // dist 为输出目录，自动创建
    21.         path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    22.         // 出口文件名，dist下的
    23.         filename: "static/js/main.js",
    24.         // 打包时自动清空上次打包资源
    25.         clean: true,
    26.     },
    27.     // loader加载器
    28.     module: {
    29.         // 写正则作为匹配规则
    30.         rules: [
    31.             // 处理css资源
    32.             {
    33.                 // 正则匹配一个 以 .css结尾的文件
    34.                 test: /\.css$/,
    35.                 // loader在数组中的执行顺序是从右到左
    36.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    37.                 // css-loader将css资源编译成commonJS的模板到js中
    38.                 // use: ['style-loader', 'css-loader'],
    39.                 use: [MiniCssExtractPlugin.loader, 'css-loader'],
    40.             },
    41.             // 处理less资源
    42.             {
    43.                 test: /\.less$/,
    44.                 // use: ['style-loader', "css-loader", "less-loader"],
    45.                 use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
    46.             },
    47.             // 处理sass 和 scss资源
    48.             {
    49.                 test: /\.s[ac]ss$/,
    50.                 // use: ["style-loader", "css-loader", "sass-loader"],
    51.                 use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    52.             },
    53.             // 处理stylus资源
    54.             {
    55.                 test: /\.styl$/,
    56.                 // use: ["style-loader", "css-loader", "stylus-loader"],
    57.                 use: [MiniCssExtractPlugin.loader, 'css-loader','stylus-loader'],
    58.             },
    59.             // 处理媒体图片资源
    60.             {
    61.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    62.                 // asset提供dataUrl来处理小图片转base64编码
    63.                 type: "asset",
    64.                 parser: {
    65.                     // 小于 10k的图片，进行转字符串处理
    66.                     // 体积略大一点，换来的是减少一次资源请求
    67.                     dataUrlCondition: {
    68.                         maxSize: 10 * 1024, 
    69.                     },
    70.                     // 修改图片资源输出路径, dist下的
    71.                     // hash: 8，命名只取生成的hash值的前8位
    72.                     // ext: 后缀名
    73.                     // query: 请求头查询字符串（可选）
    74.                     generator: {
    75.                         filename: 'static/img/[hash: 8][ext][query]',
    76.                     },
    77.                 }
    78.             },
    79.             // 处理字体图标文件，以及音视频文件
    80.             {
    81.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    82.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    83.                 // 修改媒体资源输出路径，dist下的
    84.                 generator: {
    85.                     filename: 'static/media/[hash: 8][ext][query]',
    86.                 },
    87.             },
    88.             // 处理JS文件，JS解析器：Babel
    89.             {
    90.                 test: /\.js$/,
    91.                 exclude: /node_modules/, // 排除第三方js文件
    92.                 loader: 'babel-loader',
    93.             },
    94.         ]
    95.     },
    96.     // 插件
    97.     plugins: [
    98.         // plugin的配置
    99.         new ESLintPlugin({
    100.             // context指定需要检查的文件根目录，一般只检查src下的文件
    101.             context: path.resolve(__dirname, "../src"),
    102.         }),
    103.         new HtmlWebpackPlugin({
    104.             // 以public/index.html为模板创建文件
    105.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    106.             template: path.resolve(__dirname, '../public/index.html'),
    107.         }),
    108.         // 提取css成单独文件
    109.         new MiniCssExtractPlugin({
    110.             // 定义输出文件名和目录
    111.             filename: "static/css/main.css",
    112.         }),
    113.     ],
    114.     // 开发服务器配置, webpack官方提供的小型服务器
    115.     // devServer: {
    116.     //     host: 'localhost', // 启动服务器域名
    117.     //     port: "3030", // 启动服务器端口号
    118.     //     open: true, // 是否自动打开浏览器
    119.     // },
    120.     // 模式
    121.     mode: "production", // 选择开发模式
    122. }
    123.  
    124.  
    125.  
    126.

    运行命令
    npm run build
    2.CSS兼容性处理
    安装依赖
    npm i postcss-loader postcss postcss-preset-env -D
    • webpack.prod.js

    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // 处理CSS从默认style标签 到 link标签
    11. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    12.  
    13. // webpack默认支持的是CommonJS语法
    14. module.exports = {
    15.     // 入口，相对路径
    16.     entry: './src/main.js',
    17.     // 输出
    18.     output: {
    19.         // __dirname获取当前项目根目录的绝对路径
    20.         // dist 为输出目录，自动创建
    21.         path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    22.         // 出口文件名，dist下的
    23.         filename: "static/js/main.js",
    24.         // 打包时自动清空上次打包资源
    25.         clean: true,
    26.     },
    27.     // loader加载器
    28.     module: {
    29.         // 写正则作为匹配规则
    30.         rules: [
    31.             // 处理css资源
    32.             {
    33.                 // 正则匹配一个 以 .css结尾的文件
    34.                 test: /\.css$/,
    35.                 // loader在数组中的执行顺序是从右到左
    36.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    37.                 // css-loader将css资源编译成commonJS的模板到js中
    38.                 // use: ['style-loader', 'css-loader'],
    39.                 use: [MiniCssExtractPlugin.loader, 
    40.                     {
    41.                         loader: "postcss-loader",
    42.                         options: {
    43.                           postcssOptions: {
    44.                             plugins: [
    45.                               "postcss-preset-env", // 能解决大多数样式兼容性问题
    46.                             ],
    47.                           },
    48.                         },
    49.                       },
    50.                     'css-loader'],
    51.             },
    52.             // 处理less资源
    53.             {
    54.                 test: /\.less$/,
    55.                 // use: ['style-loader', "css-loader", "less-loader"],
    56.                 use: [MiniCssExtractPlugin.loader, "css-loader", 
    57.                 {
    58.                     loader: "postcss-loader",
    59.                     options: {
    60.                       postcssOptions: {
    61.                         plugins: [
    62.                           "postcss-preset-env", // 能解决大多数样式兼容性问题
    63.                         ],
    64.                       },
    65.                     },
    66.                   },
    67.                 "less-loader"],
    68.             },
    69.             // 处理sass 和 scss资源
    70.             {
    71.                 test: /\.s[ac]ss$/,
    72.                 // use: ["style-loader", "css-loader", "sass-loader"],
    73.                 use: [MiniCssExtractPlugin.loader, "css-loader", 
    74.                 {
    75.                     loader: "postcss-loader",
    76.                     options: {
    77.                       postcssOptions: {
    78.                         plugins: [
    79.                           "postcss-preset-env", // 能解决大多数样式兼容性问题
    80.                         ],
    81.                       },
    82.                     },
    83.                   },
    84.                 "sass-loader"],
    85.             },
    86.             // 处理stylus资源
    87.             {
    88.                 test: /\.styl$/,
    89.                 // use: ["style-loader", "css-loader", "stylus-loader"],
    90.                 use: [MiniCssExtractPlugin.loader, 'css-loader', 
    91.                 {
    92.                     loader: "postcss-loader",
    93.                     options: {
    94.                       postcssOptions: {
    95.                         plugins: [
    96.                           "postcss-preset-env", // 能解决大多数样式兼容性问题
    97.                         ],
    98.                       },
    99.                     },
    100.                   },
    101.                 'stylus-loader'],
    102.             },
    103.             // 处理媒体图片资源
    104.             {
    105.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    106.                 // asset提供dataUrl来处理小图片转base64编码
    107.                 type: "asset",
    108.                 parser: {
    109.                     // 小于 10k的图片，进行转字符串处理
    110.                     // 体积略大一点，换来的是减少一次资源请求
    111.                     dataUrlCondition: {
    112.                         maxSize: 10 * 1024, 
    113.                     },
    114.                     // 修改图片资源输出路径, dist下的
    115.                     // hash: 8，命名只取生成的hash值的前8位
    116.                     // ext: 后缀名
    117.                     // query: 请求头查询字符串（可选）
    118.                     generator: {
    119.                         filename: 'static/img/[hash: 8][ext][query]',
    120.                     },
    121.                 }
    122.             },
    123.             // 处理字体图标文件，以及音视频文件
    124.             {
    125.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    126.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    127.                 // 修改媒体资源输出路径，dist下的
    128.                 generator: {
    129.                     filename: 'static/media/[hash: 8][ext][query]',
    130.                 },
    131.             },
    132.             // 处理JS文件，JS解析器：Babel
    133.             {
    134.                 test: /\.js$/,
    135.                 exclude: /node_modules/, // 排除第三方js文件
    136.                 loader: 'babel-loader',
    137.             },
    138.         ]
    139.     },
    140.     // 插件
    141.     plugins: [
    142.         // plugin的配置
    143.         new ESLintPlugin({
    144.             // context指定需要检查的文件根目录，一般只检查src下的文件
    145.             context: path.resolve(__dirname, "../src"),
    146.         }),
    147.         new HtmlWebpackPlugin({
    148.             // 以public/index.html为模板创建文件
    149.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    150.             template: path.resolve(__dirname, '../public/index.html'),
    151.         }),
    152.         // 提取css成单独文件
    153.         new MiniCssExtractPlugin({
    154.             // 定义输出文件名和目录
    155.             filename: "static/css/main.css",
    156.         }),
    157.     ],
    158.     // 开发服务器配置, webpack官方提供的小型服务器
    159.     // devServer: {
    160.     //     host: 'localhost', // 启动服务器域名
    161.     //     port: "3030", // 启动服务器端口号
    162.     //     open: true, // 是否自动打开浏览器
    163.     // },
    164.     // 模式
    165.     mode: "production", // 选择开发模式
    166. }
    167.  
    168.  
    169.  
    170.
     控制兼容性

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

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

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

    • package.json

    "last 2 version"：无论什么浏览器只支持最近的两个版本

    "> 1%"：支持99%的浏览器

    "not dead"：有的浏览器发展的过程中死了（我也不懂什么是死了，可能是不维护了），就不支持了

    "browserslist": ["last 2 version", "> 1%", "not dead"]

    想要知道更多的 browserslist 配置，查看browserslist官网GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

    运行命令
    npm run build
    合并配置（简便写法） 

    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // 处理CSS从默认style标签 到 link标签
    11. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    12.  
    13.  
    14. // 获取处理样式的Loaders
    15. const getStyleLoaders = (preProcessor) => {
    16.     return [
    17.       MiniCssExtractPlugin.loader,
    18.       "css-loader",
    19.       {
    20.         loader: "postcss-loader",
    21.         options: {
    22.           postcssOptions: {
    23.             plugins: [
    24.               "postcss-preset-env", // 能解决大多数样式兼容性问题
    25.             ],
    26.           },
    27.         },
    28.       },
    29.       preProcessor,
    30.     ].filter(Boolean);
    31.   };
    32.  
    33. // webpack默认支持的是CommonJS语法
    34. module.exports = {
    35.     // 入口，相对路径
    36.     entry: './src/main.js',
    37.     // 输出
    38.     output: {
    39.         // __dirname获取当前项目根目录的绝对路径
    40.         // dist 为输出目录，自动创建
    41.         path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    42.         // 出口文件名，dist下的
    43.         filename: "static/js/main.js",
    44.         // 打包时自动清空上次打包资源
    45.         clean: true,
    46.     },
    47.     // loader加载器
    48.     module: {
    49.         // 写正则作为匹配规则
    50.         rules: [
    51.             // 处理css资源
    52.             {
    53.                 // 正则匹配一个 以 .css结尾的文件
    54.                 test: /\.css$/,
    55.                 // loader在数组中的执行顺序是从右到左
    56.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    57.                 // css-loader将css资源编译成commonJS的模板到js中
    58.                 // use: ['style-loader', 'css-loader'],
    59.                 // use: [MiniCssExtractPlugin.loader, 
    60.                 //     {
    61.                 //         loader: "postcss-loader",
    62.                 //         options: {
    63.                 //           postcssOptions: {
    64.                 //             plugins: [
    65.                 //               "postcss-preset-env", // 能解决大多数样式兼容性问题
    66.                 //             ],
    67.                 //           },
    68.                 //         },
    69.                 //       },
    70.                 //     'css-loader'],
    71.                 use: getStyleLoaders(),
    72.             },
    73.             // 处理less资源
    74.             {
    75.                 test: /\.less$/,
    76.                 // use: ['style-loader', "css-loader", "less-loader"],
    77.                 // use: [MiniCssExtractPlugin.loader, "css-loader", 
    78.                 // {
    79.                 //     loader: "postcss-loader",
    80.                 //     options: {
    81.                 //       postcssOptions: {
    82.                 //         plugins: [
    83.                 //           "postcss-preset-env", // 能解决大多数样式兼容性问题
    84.                 //         ],
    85.                 //       },
    86.                 //     },
    87.                 //   },
    88.                 // "less-loader"],
    89.                 use: getStyleLoaders("less-loader"),
    90.             },
    91.             // 处理sass 和 scss资源
    92.             {
    93.                 test: /\.s[ac]ss$/,
    94.                 // use: ["style-loader", "css-loader", "sass-loader"],
    95.                 // use: [MiniCssExtractPlugin.loader, "css-loader", 
    96.                 // {
    97.                 //     loader: "postcss-loader",
    98.                 //     options: {
    99.                 //       postcssOptions: {
    100.                 //         plugins: [
    101.                 //           "postcss-preset-env", // 能解决大多数样式兼容性问题
    102.                 //         ],
    103.                 //       },
    104.                 //     },
    105.                 //   },
    106.                 // "sass-loader"],
    107.                 use: getStyleLoaders("sass-loader"),
    108.             },
    109.             // 处理stylus资源
    110.             {
    111.                 test: /\.styl$/,
    112.                 // use: ["style-loader", "css-loader", "stylus-loader"],
    113.                 // use: [MiniCssExtractPlugin.loader, 'css-loader', 
    114.                 // {
    115.                 //    loader: "postcss-loader",
    116.                 //    options: {
    117.                 //      postcssOptions: {
    118.                 //        plugins: [
    119.                 //          "postcss-preset-env", // 能解决大多数样式兼容性问题
    120.                 //        ],
    121.                 //      },
    122.                 //    },
    123.                 //  },
    124.                 // 'stylus-loader'],
    125.                 use: getStyleLoaders("stylus-loader"),
    126.             },
    127.             // 处理媒体图片资源
    128.             {
    129.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    130.                 // asset提供dataUrl来处理小图片转base64编码
    131.                 type: "asset",
    132.                 parser: {
    133.                     // 小于 10k的图片，进行转字符串处理
    134.                     // 体积略大一点，换来的是减少一次资源请求
    135.                     dataUrlCondition: {
    136.                         maxSize: 10 * 1024, 
    137.                     },
    138.                     // 修改图片资源输出路径, dist下的
    139.                     // hash: 8，命名只取生成的hash值的前8位
    140.                     // ext: 后缀名
    141.                     // query: 请求头查询字符串（可选）
    142.                     generator: {
    143.                         filename: 'static/img/[hash: 8][ext][query]',
    144.                     },
    145.                 }
    146.             },
    147.             // 处理字体图标文件，以及音视频文件
    148.             {
    149.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    150.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    151.                 // 修改媒体资源输出路径，dist下的
    152.                 generator: {
    153.                     filename: 'static/media/[hash: 8][ext][query]',
    154.                 },
    155.             },
    156.             // 处理JS文件，JS解析器：Babel
    157.             {
    158.                 test: /\.js$/,
    159.                 exclude: /node_modules/, // 排除第三方js文件
    160.                 loader: 'babel-loader',
    161.             },
    162.         ]
    163.     },
    164.     // 插件
    165.     plugins: [
    166.         // plugin的配置
    167.         new ESLintPlugin({
    168.             // context指定需要检查的文件根目录，一般只检查src下的文件
    169.             context: path.resolve(__dirname, "../src"),
    170.         }),
    171.         new HtmlWebpackPlugin({
    172.             // 以public/index.html为模板创建文件
    173.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    174.             template: path.resolve(__dirname, '../public/index.html'),
    175.         }),
    176.         // 提取css成单独文件
    177.         new MiniCssExtractPlugin({
    178.             // 定义输出文件名和目录
    179.             filename: "static/css/main.css",
    180.         }),
    181.     ],
    182.     // 开发服务器配置, webpack官方提供的小型服务器
    183.     // devServer: {
    184.     //     host: 'localhost', // 启动服务器域名
    185.     //     port: "3030", // 启动服务器端口号
    186.     //     open: true, // 是否自动打开浏览器
    187.     // },
    188.     // 模式
    189.     mode: "production", // 选择开发模式
    190. }
    191.  
    192.
    运行命令
    npm run build
    3.CSS压缩
    安装依赖
    npm i css-minimizer-webpack-plugin -D

    • webpack.prod.js
    1. // node.js核心模块path，专门处理路径
    2. const path = require('path');
    3.  
    4. // 处理HTML文件
    5. const HtmlWebpackPlugin = require('html-webpack-plugin');
    6.  
    7. // Eslint插件
    8. const ESLintPlugin = require('eslint-webpack-plugin');
    9.  
    10. // 处理CSS从默认style标签 到 link标签
    11. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    12.  
    13. // CSS压缩
    14. const CssMinizerPlugin = require('css-minimizer-webpack-plugin');
    15.  
    16.  
    17. // 获取处理样式的Loaders
    18. const getStyleLoaders = (preProcessor) => {
    19.     return [
    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.       preProcessor,
    33.     ].filter(Boolean);
    34.   };
    35.  
    36. // webpack默认支持的是CommonJS语法
    37. module.exports = {
    38.     // 入口，相对路径
    39.     entry: './src/main.js',
    40.     // 输出
    41.     output: {
    42.         // __dirname获取当前项目根目录的绝对路径
    43.         // dist 为输出目录，自动创建
    44.         path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    45.         // 出口文件名，dist下的
    46.         filename: "static/js/main.js",
    47.         // 打包时自动清空上次打包资源
    48.         clean: true,
    49.     },
    50.     // loader加载器
    51.     module: {
    52.         // 写正则作为匹配规则
    53.         rules: [
    54.             // 处理css资源
    55.             {
    56.                 // 正则匹配一个 以 .css结尾的文件
    57.                 test: /\.css$/,
    58.                 // loader在数组中的执行顺序是从右到左
    59.                 // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
    60.                 // css-loader将css资源编译成commonJS的模板到js中
    61.                 // use: ['style-loader', 'css-loader'],
    62.                 // use: [MiniCssExtractPlugin.loader, 
    63.                 //     {
    64.                 //         loader: "postcss-loader",
    65.                 //         options: {
    66.                 //           postcssOptions: {
    67.                 //             plugins: [
    68.                 //               "postcss-preset-env", // 能解决大多数样式兼容性问题
    69.                 //             ],
    70.                 //           },
    71.                 //         },
    72.                 //       },
    73.                 //     'css-loader'],
    74.                 use: getStyleLoaders(),
    75.             },
    76.             // 处理less资源
    77.             {
    78.                 test: /\.less$/,
    79.                 // use: ['style-loader', "css-loader", "less-loader"],
    80.                 // use: [MiniCssExtractPlugin.loader, "css-loader", 
    81.                 // {
    82.                 //     loader: "postcss-loader",
    83.                 //     options: {
    84.                 //       postcssOptions: {
    85.                 //         plugins: [
    86.                 //           "postcss-preset-env", // 能解决大多数样式兼容性问题
    87.                 //         ],
    88.                 //       },
    89.                 //     },
    90.                 //   },
    91.                 // "less-loader"],
    92.                 use: getStyleLoaders("less-loader"),
    93.             },
    94.             // 处理sass 和 scss资源
    95.             {
    96.                 test: /\.s[ac]ss$/,
    97.                 // use: ["style-loader", "css-loader", "sass-loader"],
    98.                 // use: [MiniCssExtractPlugin.loader, "css-loader", 
    99.                 // {
    100.                 //     loader: "postcss-loader",
    101.                 //     options: {
    102.                 //       postcssOptions: {
    103.                 //         plugins: [
    104.                 //           "postcss-preset-env", // 能解决大多数样式兼容性问题
    105.                 //         ],
    106.                 //       },
    107.                 //     },
    108.                 //   },
    109.                 // "sass-loader"],
    110.                 use: getStyleLoaders("sass-loader"),
    111.             },
    112.             // 处理stylus资源
    113.             {
    114.                 test: /\.styl$/,
    115.                 // use: ["style-loader", "css-loader", "stylus-loader"],
    116.                 // use: [MiniCssExtractPlugin.loader, 'css-loader', 
    117.                 // {
    118.                 //    loader: "postcss-loader",
    119.                 //    options: {
    120.                 //      postcssOptions: {
    121.                 //        plugins: [
    122.                 //          "postcss-preset-env", // 能解决大多数样式兼容性问题
    123.                 //        ],
    124.                 //      },
    125.                 //    },
    126.                 //  },
    127.                 // 'stylus-loader'],
    128.                 use: getStyleLoaders("stylus-loader"),
    129.             },
    130.             // 处理媒体图片资源
    131.             {
    132.                 test: /\.(png|jpe?g|gif|webp|svg)$/,
    133.                 // asset提供dataUrl来处理小图片转base64编码
    134.                 type: "asset",
    135.                 parser: {
    136.                     // 小于 10k的图片，进行转字符串处理
    137.                     // 体积略大一点，换来的是减少一次资源请求
    138.                     dataUrlCondition: {
    139.                         maxSize: 10 * 1024, 
    140.                     },
    141.                     // 修改图片资源输出路径, dist下的
    142.                     // hash: 8，命名只取生成的hash值的前8位
    143.                     // ext: 后缀名
    144.                     // query: 请求头查询字符串（可选）
    145.                     generator: {
    146.                         filename: 'static/img/[hash: 8][ext][query]',
    147.                     },
    148.                 }
    149.             },
    150.             // 处理字体图标文件，以及音视频文件
    151.             {
    152.                 test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
    153.                 type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
    154.                 // 修改媒体资源输出路径，dist下的
    155.                 generator: {
    156.                     filename: 'static/media/[hash: 8][ext][query]',
    157.                 },
    158.             },
    159.             // 处理JS文件，JS解析器：Babel
    160.             {
    161.                 test: /\.js$/,
    162.                 exclude: /node_modules/, // 排除第三方js文件
    163.                 loader: 'babel-loader',
    164.             },
    165.         ]
    166.     },
    167.     // 插件
    168.     plugins: [
    169.         // plugin的配置
    170.         new ESLintPlugin({
    171.             // context指定需要检查的文件根目录，一般只检查src下的文件
    172.             context: path.resolve(__dirname, "../src"),
    173.         }),
    174.         new HtmlWebpackPlugin({
    175.             // 以public/index.html为模板创建文件
    176.             // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
    177.             template: path.resolve(__dirname, '../public/index.html'),
    178.         }),
    179.         // 提取css成单独文件
    180.         new MiniCssExtractPlugin({
    181.             // 定义输出文件名和目录
    182.             filename: "static/css/main.css",
    183.         }),
    184.         // CSS压缩
    185.         new CssMinizerPlugin(),
    186.     ],
    187.     // 开发服务器配置, webpack官方提供的小型服务器
    188.     // devServer: {
    189.     //     host: 'localhost', // 启动服务器域名
    190.     //     port: "3030", // 启动服务器端口号
    191.     //     open: true, // 是否自动打开浏览器
    192.     // },
    193.     // 模式
    194.     mode: "production", // 选择开发模式
    195. }

    HTML 与 js压缩

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

    不需要额外进行配置

    下一篇： 

  • 相关阅读:
    微信小程序 实现滑块是矩形的slider组件
    Windows下通过Ollama部署使用本地模型
    可观测性-可视化-Grafana热图Heatmap
    【云原生】SpringCloud系列之服务调用OpenFeign（日志配置、异常解码器、更改负载均衡策略、替换默认通信组件等）
    【ARM微型电脑/IoT设备/嵌入式】Linux Ubuntu 树莓派 Jetson nano设置PTP时间同步
    f2-python计算阶乘并写出过程--没搞出来--数字的阶乘
    线程安全案例 --- 线程池
    数据结构之查找
    我的项目day02:前端全局样式和js配置，simpleui的使用，跨域问题，cors解决跨域问题，git的下载与安装，pycharm中配置git
    【lesson2】数据库的库操作
  • 原文地址：https://blog.csdn.net/lklalmq/article/details/136581215