webpack基础-EW帮帮网

一、`webpack`的基础：

官网：https://webpack.js.org/
中文文档：https://www.webpackjs.com/concepts/

1、定义：

webpack是静态资源的打包工具

2、`webpack`的功能：

① 开发模式：仅能编译`JS`中的`ES Module`语法

② 生产模式：编译`JS`中的`ES Module`语法，并且压缩`js`代码

3、`webpack` 的五大核心：

① `entry`：（入口文件）

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

② `output`：（输出文件）

指示webpack打包好的文件输出到哪里，如何命名等

③ `loader`：（加载器）

webpack本身只能处理js、json等资源，其它资源需要借助loder

④ `plugins`：（插件）

扩展webpack的功能

⑤ `mode`：（模式）

开发模式（development）、生产模式（production）

4、`webpack` 的配置文件：

① 初始化项目：`npm init`

要注意package.json文件中的name不要包含中文，且不要包含webpack

② 下载 `webpack`：`npm i webpack webpack-cli -D`

③ 在项目根目录新建文件`index.html`，用于验证引入打包后的文件是否正确：

可以从下面的代码看到，js文件打包路径如下：dist/static/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
</body>
</html>

④ 在项目根目录新建`src`文件夹，用于编写资源文件：

在src文件夹下新建js文件夹，在js文件夹下新建sum.js文件

export default function sum(a, b) {
    return a + b;
}

在src文件夹下新建mian.js文件

import sum from './js/sum.js'
console.log(sum(5,6))

⑤ 在项目根目录新建文件名为 `webapck.config.js` 的文件

配置文件是在NodeJs平台下运行的，webpack采用的是commonJs的模块化规范

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

⑥ 执行打包命令：

（1）在当前命令行所在的文件夹下查找`webpack.config.js`文件，并且执行配置：

npx webpack

（2）在当前命令行所在的文件夹下查找文件，并且打包运行：

如果有weback.config.js，会先执行weback.config.js里面的配置，然后才会执行指定文件的代码，如果入口文件一样，会被执行两次并且报错！

npx webpack 文件路径

二、`webpack`处理资源：

1、处理样式资源：

使用文档：https://webpack.docschina.org/loaders/

① 处理 `css`资源：

（1）安装`css-loader` 和 `style-loader`：

npm install --save-dev css-loader style-loader

（2）编写并引入资源：

在`src`文件夹下新建`css`文件夹，在`css`文件夹下新建`a.css`，写入如下内容：

.box1 {
    width: 100px;
    height: 100px;
    background: pink;
}

在main.js中引入css文件：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
console.log(sum(5,6))

（3）编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

（4）在`index.html`中添加选择器用来展现样式：

可以从下面的代码看到，js文件打包路径如下：dist/static/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
    <div class="box1"></div>
</body>
</html>

② 处理 `less`资源：

（1）安装`less`、`less-loader`、`css-loader` 和 `style-loader`：

npm install --save-dev less less-loader css-loader style-loader

（2）编写并引入资源：

a、在`css`文件夹下新建`b.less`，写入如下内容：

.box2 {
    width: 100px;
    height: 100px;
    background: deeppink;
}

b、在`main.js`中引入`css`文件：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
console.log(sum(5,6))

（3）编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

（4）在`index.html`中添加选择器用来展现样式：

可以从下面的代码看到，js文件打包路径如下：dist/static/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

③ 处理 `scss`和`sass`资源：

（1）安装`sass`、`sass-loader`、`css-loader` 和 `style-loader`：

npm install --save-dev sass sass-loader css-loader style-loader

（2）编写并引入资源：

a、在`css`文件夹下新建`c.scss`，写入如下内容：

.box3 {
    width: 100px;
    height: 100px;
    background: rgb(236, 33, 67);
}

b、在`css`文件夹下新建`d.sass`，写入如下内容：

.box4
    width: 100px;
    height: 100px;
    background: rgb(131, 0, 0);

c、在`main.js`中引入`css`文件：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
// 引入sass资源
import './css/c.sass'
// 引入scss资源
import './css/d.scss'
console.log(sum(5,6))

（3）编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

（4）在`index.html`中添加选择器用来展现样式：

可以从下面的代码看到，js文件打包路径如下：dist/static/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

④ 处理 `styl`资源：

（1）安装`stylus-loader`、`css-loader` 和 `style-loader`：

npm install --save-dev stylus-loader css-loader style-loader

（2）编写并引入资源：

a、在`css`文件夹下新建`e.styl`，写入如下内容：

.box5
    width 100px
    height 100px
    background rgb(233, 130, 12)

b、在`main.js`中引入`css`文件：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
// 引入sass资源
import './css/c.sass'
// 引入scss资源
import './css/d.scss'
// 引入stylus资源
import './css/e.styl'
console.log(sum(5,6))

（3）编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

（4）在`index.html`中添加选择器用来展现样式：

可以从下面的代码看到，js文件打包路径如下：dist/static/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

⑤ `webpack`生产模式提取`css`：

（1）问题：

css文件目前被打包到js文件中，当js加载时，会创建style标签来生成样式。这可能会导致闪屏的现象。

（2）解决：

将css提取出来，变成单独的文件，通过link标签进行引入

（3）安装依赖：`npm install --save-dev mini-css-extract-plugin`

使用文档：https://www.webpackjs.com/plugins/mini-css-extract-plugin#root

（4）打包配置：`webpack.prod.js`

要将style-loader改为MiniCssExtractPlugin.loader

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 提取css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        path: path.resolve(__dirname,'../dist'), 
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        }),
        new MiniCssExtractPlugin({ // 将所有的css提取到一个单独的文件中
            filename: 'static/css/main.css'
        })
    ],
    // 模式
    mode: 'production'
}

⑥ `webpack`生产模式进行`css`兼容性处理：

使用文档：https://www.webpackjs.com/loaders/postcss-loader#root

（1）安装依赖：

npm install --save-dev postcss-loader postcss postcss-preset-env

（2）打包配置：`webpack.prod.js`

要将配置写在css-loader之后，预处理器之前

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 提取css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        path: path.resolve(__dirname,'../dist'), 
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    MiniCssExtractPlugin.loader, // 将 css 文件打包为一个单独的文件
                    'css-loader', // 将css资源编译成commonjs的模块化js
                    { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
                        loader: 'postcss-loader',
                        options: { // css 的兼容性处理配置
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            // 其他选项
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
                        loader: 'postcss-loader',
                        options: { // css 的兼容性处理配置
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            // 其他选项
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
                        loader: 'postcss-loader',
                        options: { // css 的兼容性处理配置
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            // 其他选项
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
                        loader: 'postcss-loader',
                        options: { // css 的兼容性处理配置
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            // 其他选项
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        }),
        new MiniCssExtractPlugin({ // 将所有的css提取到一个单独的文件中
            filename: 'static/css/main.css'
        })
    ],
    // 模式
    mode: 'production'
}

（3）需要兼容的浏览器配置：`package.json`

{
  "name": "study_web_pack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "webpack": "^5.99.9",
    "webpack-cli": "^6.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.28.0",
    "@babel/preset-env": "^7.28.0",
    "@eslint/js": "^9.30.1",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "eslint": "^9.30.1",
    "eslint-webpack-plugin": "^5.0.2",
    "globals": "^16.3.0",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.3",
    "less": "^4.3.0",
    "less-loader": "^12.3.0",
    "mini-css-extract-plugin": "^2.9.2",
    "postcss": "^8.5.6",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.2.4",
    "sass": "^1.89.2",
    "sass-loader": "^16.0.5",
    "style-loader": "^4.0.0",
    "stylus-loader": "^8.1.1",
    "webpack-dev-server": "^5.2.2"
  },
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ]
}

（4）兼容代码测试：

在这里插入图片描述

⑦ `webpack`生产模式封装样式`loader`：

因为样式的打包代码中，有很多重复的代码，所以可以封装为一个函数，进行代码的简化

webpack.prod.js：

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 提取css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 封装样式打包代码
function getStyleLoader (otherPre) {
    return [
        MiniCssExtractPlugin.loader, // 将 css 文件打包为一个单独的文件
        'css-loader', // 将css资源编译成commonjs的模块化js
        { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
            loader: 'postcss-loader',
            options: { // css 的兼容性处理配置
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-preset-env',
                            {
                                // 其他选项
                            },
                        ],
                    ],
                },
            },
        },
        otherPre
    ].filter(Boolean)
}


module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        path: path.resolve(__dirname,'../dist'), 
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: getStyleLoader(), // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: getStyleLoader('less-loader')
            },
            {
                test: /\.s[ac]ss$/i,
                use: getStyleLoader('sass-loader')
            },
            {
                test: /\.styl$/i,
                use: getStyleLoader('stylus-loader')
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        }),
        new MiniCssExtractPlugin({ // 将所有的css提取到一个单独的文件中
            filename: 'static/css/main.css'
        })
    ],
    // 模式
    mode: 'production'
}

⑧ `webpack`生产模式压缩`css`：

使用文档：https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/#root

（1）安装依赖：

npm install css-minimizer-webpack-plugin --save-dev

（2）打包配置：`webpack.prod.js`

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 提取css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 引入 css压缩 插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 封装样式打包代码
function getStyleLoader (otherPre) {
    return [
        MiniCssExtractPlugin.loader, // 将 css 文件打包为一个单独的文件
        'css-loader', // 将css资源编译成commonjs的模块化js
        { // 需要配置就写成对象的形式，不需要配置就写成字符串的形式
            loader: 'postcss-loader',
            options: { // css 的兼容性处理配置
                postcssOptions: {
                    plugins: [
                        [
                            'postcss-preset-env',
                            {
                                // 其他选项
                            },
                        ],
                    ],
                },
            },
        },
        otherPre
    ].filter(Boolean)
}


module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        path: path.resolve(__dirname,'../dist'), 
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: getStyleLoader(), // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: getStyleLoader('less-loader')
            },
            {
                test: /\.s[ac]ss$/i,
                use: getStyleLoader('sass-loader')
            },
            {
                test: /\.styl$/i,
                use: getStyleLoader('stylus-loader')
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // optimization: { // 不在这里写的话，可以在 plugins 中写
    //     minimizer: [
    //         new CssMinimizerPlugin(),
    //     ],
    // },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        }),
        new MiniCssExtractPlugin({ // 将所有的css提取到一个单独的文件中
            filename: 'static/css/main.css'
        }),
        new CssMinimizerPlugin()
    ],
    // 模式
    mode: 'production'
}

2、处理图片资源：

使用文档：https://webpack.docschina.org/guides/asset-modules/#root

① 引入图片资源：

在src文件夹下新建images文件夹，在images文件夹下新增图片，然后再css文件中引入图片：

a、`b.less`文件内容更改如下：

.box2 {
    width: 100px;
    height: 100px;
    background: url("../images/1.png") no-repeat;
    background-size: cover;
}

b、`d.scss`文件内容更改如下：

.box4 {
    width: 100px;
    height: 100px;
    background: url("../images/2.png") no-repeat;
    background-size: cover;
}

c、`e.styl`文件内容更改如下：

.box5
    width 100px
    height 100px
    background url("../images/3.svg") no-repeat
    background-size cover

② 编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            }
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

3、处理字体图标资源：

① 下载字体图标资源：

https://www.iconfont.cn/?spm=a313x.fonts_index.i3.2.24503a81tuvDPL

将选中的资源加入购物车，然后添加到项目中，最后将项目中的所有资源下载到本地

② 引入字体图标资源（使用了`Symbol`形式）：

（1）将本地资源解压

（2）在`src`文件夹下新建`fonts`文件夹，将`iconfont.ttf`、`iconfont.woff`、`iconfont.woff2`三个字体文件放进去

（3）将 `iconfont.css` 文件放入`css`文件夹中，并修改字体文件的引入路径：

@font-face {
  font-family: "iconfont"; /* Project id 4963550 */
  src: url('../fonts/iconfont.woff2?t=1751337050529') format('woff2'),
       url('../fonts/iconfont.woff?t=1751337050529') format('woff'),
       url('../fonts/iconfont.ttf?t=1751337050529') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cangshu:before {
  content: "\e647";
}

.icon-jumao:before {
  content: "\e648";
}

.icon-yang:before {
  content: "\e649";
}

（4）将 `iconfont.js` 文件放入`js`文件夹中

（5）在`main.js`中引入`js`文件：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
// 引入sass资源
import './css/c.sass'
// 引入scss资源
import './css/d.scss'
// 引入stylus资源
import './css/e.styl'
// 引入字体图标资源
import './css/iconfont.css'
import './js/iconfont.js'
console.log(sum(5,6))

③ 编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            }
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

④ 在`index.html`中添加选择器用来展现样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./dist/static/js/main.js"></script>
</head>
<body>
    <h1>学习webpack</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-cangshu"></use>
        <use xlink:href="#icon-jumao"></use>
        <use xlink:href="#icon-yang"></use>
    </svg>
</body>
</html>

4、处理其它资源（视频、音频、文档等）：

① 引入资源：

（1）在`src`文件夹下新建`media`文件夹，将资源文件放进去

（2）以`mp4`资源为例，在`main.js`文件中进行引用：

import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
// 引入sass资源
import './css/c.sass'
// 引入scss资源
import './css/d.scss'
// 引入stylus资源
import './css/e.styl'
// 引入字体图标资源
import './css/iconfont.css'
import './js/iconfont.js'
// 引入其它资源
import './media/1.mp4'
console.log(sum(5,6))

② 编写打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/media/[hash:10][ext][query]'
                }
            }
        ]
    },
    // 插件
    plugins: [
        // plugins的配置
    ],
    // 模式
    mode: 'development'
}

5、处理`js`资源（代码格式和兼容性的处理）：

生产模式下的webpack会自动压缩js资源

webpack只能编译js中的ES模块化语法，不能编译其它语法

① 代码格式：`eslint`

中文网：https://zh-hans.eslint.org/docs/latest/use/getting-started
官网：https://eslint.org/docs/latest/
webpack使用链接：https://www.webpackjs.com/plugins/eslint-webpack-plugin/#root

（1）定义：

处理js或者jsx语法的工具

（2）安装`eslint`（当前安装的版本是`9.30.1`）：

npm i eslint eslint-webpack-plugin -D

（3）`eslint` 配置文件的不同格式：

a、`.eslintrc`、`.eslintrc.js`、`.eslintrc.json`：`ESLint v8.21.0` 以下使用，需要新建该文件

b、`eslint.config.js`：`ESLint v8.21.0` 以上使用，需要新建该文件

c、`package.json`、`eslintconfig`：直接在该文件中写规则

（4）常用配置：

`ESLint v9` 以下使用

a、 `parseOptions`：规则解析的选项

b、 `rules`：具体检查的规则

off 或者 0 表示关闭规则检查
warn 或 1 表示开启规则检查，使用警告级别的错误（不会影响程序的运行）
error 或 2 表示开启规则检查，使用错误级别的错误（会影响程序的运行）

c、 `extends`：继承已有的规则

自定义的规则会覆盖继承的规则。
官方的继承规则无需下载，非官方的继承规则需要下载。
常用的继承规则如下：

`Eslint官方的规则`：`eslint:recommended`

中文文档：https://zh-hans.eslint.org/docs/latest/rules/
官方文档：https://eslint.org/docs/latest/rules/

`Vue2官方推荐规则`：`plugin:vue/essential`

`Vue3官方推荐规则`：`plugin:vue/vue3-essential`、`plugin:vue/vue3-recommended`

文档：https://eslint.vuejs.org/rules/#vue3-recommended

`React官方推荐规则`： `plugin:react/recommended`

文档：https://github.com/jsx-eslint/eslint-plugin-react#configuration

`TypeScript官方推荐规则` ：`plugin:@typescript-eslint/recommended`

文档：https://typescript-eslint.io/users/configs/

d、完整演示代码（`.eslintrc.js`文件代码）：

module.exports = {
    parseOptions: { // 解析选项
        ecmaVersion: 6, // ES语法版本
        sourceType: 'module', // ES模块化
        ecmaFeatures: { // ES其它特性
            jsx: true // 如果是react项目，需要开启
        }
    },
    rules: { // 具体检查规则
        // off 或者 0 表示关闭规则检查   
        // warn 或 1 表示开启规则检查，使用警告级别的错误（不会影响程序的运行）
        // error 或 2 表示开启规则检查，使用错误级别的错误（会影响程序的运行）
        'semi': 'error', // 语句强制分号结尾
        'quotes': ['error', 'single'], // 引号类型 - 数组的第一个元素表示是否开启检查，第二个元素表示值
    },
    extends: ["eslint:recommended"] // 继承已有的规则
}

`ESLint v9` 以上使用

a、 `files`：配置应用的文件

b、 `rules`：具体检查的规则

（5）在`webpack`中配置和使用`eslint`：

`ESLint v9` 以下使用

在项目的根目录下新建.eslintrc.js文件，写入如下内容：

module.exports = {
    extends: ["eslint:recommended"], // 继承已有的规则
    env: {
        browser: true, // 启用浏览器中的全局变量
        node: true, // 启用node中的全局变量
    },
    parseOptions: { // 解析选项
        ecmaVersion: 6, // ES语法版本
        sourceType: 'module', // ES模块化
    },
    rules: { // 具体检查规则
        "no-var": 2, // 禁用var去定义变量
    }
}

在项目的根目录下新建.eslintrcignore文件，写入需要忽略的文件内容：

dist

`ESLint v9` 以上使用

安装 @eslint/js ：npm install --save-dev @eslint/js
安装 globals （使用全局变量）：npm install --save-dev globals

在项目的根目录下新建eslint.config.js文件，写入如下内容：

import js from '@eslint/js';
import globals from "globals";

export default [
    { // 忽略文件
        ignores: [
            'dist/**',
            'src/**/iconfont.js'
        ]
    },
    // 使用 ESLint 官方推荐规则
    js.configs.recommended,
    {
        files: ["**/*.js"],
        languageOptions: {
            ecmaVersion: 'latest', // ES语法版本
            sourceType: "module", // 明确模块类型
            globals: { // 扩展全局变量（如果需要）
                ...globals.node,
                ...globals.browser,
            }
        }
    },
    // 自定义规则
    {
        files: ["src/**/*.js"],
        rules: {
            "no-var": 2, // 禁用var去定义变量
        }
    },
];

编写打包配置（`webpack.config.js`）：

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            }
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, 'src')
        })
    ],
    // 模式
    mode: 'development'
}

如果安装了eslint插件，不需要编译就可以看到报错：
在这里插入图片描述

② 兼容性：`babel`

官网： https://babeljs.io/setup
中文网：https://www.babeljs.cn/docs/
webpack使用链接：https://www.webpackjs.com/loaders/babel-loader/#root

（1）定义：

javascript的编译器，可以将es6语法编译成向后兼容的javascript语法

（2）`babel` 配置文件的不同格式：

a、`babel.config.js`、`babel.config.json`：需要新建该文件，位于项目根目录

b、`.babelrc`、`.babelrc.js`、`.babelrc.json`：需要新建该文件，位于项目根目录

c、`package.json`中的``babel：直接在该文件中写规则

（3）下载安装包：

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

（4）使用：

a、在`webpack.config.js`中编写配置：

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, 'src')
        })
    ],
    // 模式
    mode: 'development'
}

b、在`src`文件夹下的`js`文件夹中新建`util.js`文件：

const add = (a,b) => {
    return a+b
}

const sub = (...params) => {
    return params.reduce((a,b) => a-b)
}

module.exports = {
    add,
    sub
}

c、在`main.js`文件中引用并且使用：

import sum from './js/sum.js'
// 引入es6语法的js文件
import {add,sub} from './js/util.js'
// 引入css资源
import './css/a.css'
// 引入less资源
import './css/b.less'
// 引入sass资源
import './css/c.sass'
// 引入scss资源
import './css/d.scss'
// 引入stylus资源
import './css/e.styl'
// 引入字体图标资源
import './css/iconfont.css'
import './js/iconfont.js'
// 引入其它资源
import './media/1.mp4'
const a = sum(20,30)
console.log(a)

const b = add(1,2)
console.log(b)

const c = sub(100,10,20)
console.log(c)

d、在项目的根目录下新建`babel.config.js`文件：

module.exports = {
    presets: [ // 智能预设
        '@babel/preset-env'
    ]
}

e、编译进行比对：`npx webpack`

在这里插入图片描述

6、处理`html`资源：

生产模式下的webpack会自动压缩html资源

使用文档：https://www.webpackjs.com/plugins/html-webpack-plugin/#root

① 目的：在`html`中自动引入打包生成的资源

② 下载安装包：

npm install --save-dev html-webpack-plugin

③ 打包配置： `webapck.config.js`

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, 'src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    // 模式
    mode: 'development'
}

三、配置`webpack`自动编译：

① 下载安装包：

npm i webpack-dev-server -D

② 新增开发服务器的配置：`webpack.config.js`

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口 - 相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径
        path: path.resolve(__dirname， 'dist'),
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, 'src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    // 开发服务器：不会输出资源，在内存中编译打包
    devServer: {
        host: 'localhost', // 启动服务器的域名
        port: '3001', // 启动服务器的端口号
        open: true, // 是否自动打开浏览器
    },
    // 模式
    mode: 'development'
}

③ 编译：

npx webpack serve

四、配置`webpack`生产模式：

1、在项目的根目录下新建`config`文件夹：

将webpack.config.js文件放进去，改名为webpack.dev.js
复制webpack.dev.js文件，改名为webpack.prod.js

2、修改`webpack.dev.js`文件中的内容：

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        // path: path.resolve(__dirname， '../dist'), 
        path: undefined, // 开发模式不会输出文件
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        // clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        })
    ],
    // 开发服务器：不会输出资源，在内存中编译打包
    devServer: {
        host: 'localhost', // 启动服务器的域名
        port: '3001', // 启动服务器的端口号
        open: true, // 是否自动打开浏览器
    },
    // 模式
    mode: 'development'
}

3、修改`webpack.prod.js`文件中的内容：

// 引入path模块
const path = require('path')
// 引入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入 html资源引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口 - 相对路径（因为编译的时候，命令是从根目录下执行的，所以不用修改）
    entry: './src/main.js',
    // 输出
    output: {
        // 所有打包的资源输出的目录 - 绝对路径（打包的时候，是根据该文件进行定位的）
        path: path.resolve(__dirname， '../dist'), 
        // 入口文件打包输出的名称
        filename: 'static/js/main.js',
        // 在打包前，会清空path目录中的所有内容，然后再进行打包 -- webpack5中使用
        // 如果是webpack4，则需要使用clean-webpack-plugin插件进行清空
        clean: true // 开发时不需要
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配以.css结尾的文件
                use: [
                    'style-loader', // 将js中的css通过style标签的形式添加到html中
                    'css-loader' // 将css资源编译成commonjs的模块化js
                ], // loader的执行顺序是从后往前的
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less文件编译为css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader', // 将stylus文件编译为css文件
                ],
            },
            {   // webpack4处理图片资源的方式：使用file-loader、url-loader。
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // url-loader将图片资源进行优化
                // webpack5处理图片资源的方式（file-loader、url-loader已经内置）：
                test: /\.(png|jpe?g|svg|webp|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024 // 小于30kb的图片会转为base64 - 减少请求数量，但是体积会变大
                    }
                },
                generator: { // 打包的图片输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理图片资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理图片资源的方式（file-loader已经内置）：
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [hash:10]表示只保留名称的前10位
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            {   // webpack4处理其它资源的方式：使用file-loader
                // file-loader将文件资源编译为webpack识别的资源原封不动的进行输出。
                // webpack5处理其它资源的方式（file-loader已经内置）：
                test: /\.(mp3|MP4|avi|.doc)$/i,
                type: 'asset/resource', // 只会对文件原封不动的输出，不会转为base64
                generator: { // 打包的字体输出的目录
                    // [name]表示保留原始文件名
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 排除哪些文件不需要编译
                loader: 'babel-loader', // 只需要一个loader，不需要use
                // use: {
                //     loader: 'babel-loader',
                //     options: { // 智能预设，这个对象可以不写，那么就需要在项目的根目录下新建babel.config.js，添加智能预设
                //         presets: ['@babel/preset-env'],
                //     },
                // },
            },
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({ // eslint检测的文件都有哪些
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({ // 使用 html资源引入 插件，并且保留原模版
            template: path.resolve(__dirname, '../index.html')
        })
    ],
    // 模式
    mode: 'production'
}

4、编译`webpack.dev.js`文件：

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

5、编译`webpack.prod.js`文件：

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

6、将编译命令在`package.json`中进行简写：

{
  "name": "study_web_pack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "webpack": "^5.99.9",
    "webpack-cli": "^6.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.28.0",
    "@babel/preset-env": "^7.28.0",
    "@eslint/js": "^9.30.1",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "eslint": "^9.30.1",
    "eslint-webpack-plugin": "^5.0.2",
    "globals": "^16.3.0",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.3",
    "less": "^4.3.0",
    "less-loader": "^12.3.0",
    "sass": "^1.89.2",
    "sass-loader": "^16.0.5",
    "style-loader": "^4.0.0",
    "stylus-loader": "^8.1.1",
    "webpack-dev-server": "^5.2.2"
  }
}

webpack基础

一、webpack的基础：

1、定义：

2、webpack的功能：

① 开发模式：仅能编译JS中的ES Module语法

② 生产模式：编译JS中的ES Module语法，并且压缩js代码

3、webpack 的五大核心：

① entry：（入口文件）

② output：（输出文件）

③ loader：（加载器）

④ plugins：（插件）

⑤ mode：（模式）

4、webpack 的配置文件：

① 初始化项目：npm init

② 下载 webpack：npm i webpack webpack-cli -D

③ 在项目根目录新建文件index.html，用于验证引入打包后的文件是否正确：

④ 在项目根目录新建src文件夹，用于编写资源文件：

⑤ 在项目根目录新建文件名为 webapck.config.js 的文件

⑥ 执行打包命令：

（1）在当前命令行所在的文件夹下查找webpack.config.js文件，并且执行配置：

（2）在当前命令行所在的文件夹下查找文件，并且打包运行：

二、webpack处理资源：

1、处理样式资源：

① 处理 css资源：

（1）安装css-loader 和 style-loader：

（2）编写并引入资源：

在src文件夹下新建css文件夹，在css文件夹下新建a.css，写入如下内容：

（3）编写打包配置： webapck.config.js

（4） 在index.html中添加选择器用来展现样式：

② 处理 less资源：

（1）安装less、less-loader、css-loader 和 style-loader：

（2）编写并引入资源：

a、在css文件夹下新建b.less，写入如下内容：

b、在main.js中引入css文件：

（3）编写打包配置： webapck.config.js

（4） 在index.html中添加选择器用来展现样式：

③ 处理 scss和sass资源：

（1）安装sass、sass-loader、css-loader 和 style-loader：

（2）编写并引入资源：

a、在css文件夹下新建c.scss，写入如下内容：

b、在css文件夹下新建d.sass，写入如下内容：

c、在main.js中引入css文件：

（3）编写打包配置： webapck.config.js

（4） 在index.html中添加选择器用来展现样式：

④ 处理 styl资源：

（1）安装stylus-loader、css-loader 和 style-loader：

（2）编写并引入资源：

a、在css文件夹下新建e.styl，写入如下内容：

b、在main.js中引入css文件：

（3）编写打包配置： webapck.config.js

（4） 在index.html中添加选择器用来展现样式：

⑤ webpack生产模式提取css：

（1）问题：

（2）解决：

（3）安装依赖：npm install --save-dev mini-css-extract-plugin

（4）打包配置：webpack.prod.js

⑥ webpack生产模式进行css兼容性处理：

（1）安装依赖：

（2）打包配置：webpack.prod.js

（3）需要兼容的浏览器配置：package.json

（4）兼容代码测试：

⑦ webpack生产模式封装样式loader：

⑧ webpack生产模式压缩css：

（1）安装依赖：

（2）打包配置：webpack.prod.js

2、处理图片资源：

① 引入图片资源：

a、b.less文件内容更改如下：

b、d.scss文件内容更改如下：

c、e.styl文件内容更改如下：

② 编写打包配置： webapck.config.js

3、处理字体图标资源：

① 下载字体图标资源：

② 引入字体图标资源（使用了Symbol形式）：

（1）将本地资源解压

（2）在src文件夹下新建fonts文件夹，将iconfont.ttf、iconfont.woff、iconfont.woff2三个字体文件放进去

（3）将 iconfont.css 文件放入css文件夹中，并修改字体文件的引入路径：

（4）将 iconfont.js 文件放入js文件夹中

（5） 在main.js中引入js文件：

③ 编写打包配置： webapck.config.js

一、`webpack`的基础：

2、`webpack`的功能：

① 开发模式：仅能编译`JS`中的`ES Module`语法

② 生产模式：编译`JS`中的`ES Module`语法，并且压缩`js`代码

3、`webpack` 的五大核心：

① `entry`：（入口文件）

② `output`：（输出文件）

③ `loader`：（加载器）

④ `plugins`：（插件）

⑤ `mode`：（模式）

4、`webpack` 的配置文件：

① 初始化项目：`npm init`

② 下载 `webpack`：`npm i webpack webpack-cli -D`

③ 在项目根目录新建文件`index.html`，用于验证引入打包后的文件是否正确：

④ 在项目根目录新建`src`文件夹，用于编写资源文件：

⑤ 在项目根目录新建文件名为 `webapck.config.js` 的文件

（1）在当前命令行所在的文件夹下查找`webpack.config.js`文件，并且执行配置：

二、`webpack`处理资源：

① 处理 `css`资源：

（1）安装`css-loader` 和 `style-loader`：

在`src`文件夹下新建`css`文件夹，在`css`文件夹下新建`a.css`，写入如下内容：

（3）编写打包配置： `webapck.config.js`

（4）在`index.html`中添加选择器用来展现样式：

② 处理 `less`资源：

（1）安装`less`、`less-loader`、`css-loader` 和 `style-loader`：

a、在`css`文件夹下新建`b.less`，写入如下内容：

b、在`main.js`中引入`css`文件：

（3）编写打包配置： `webapck.config.js`

（4）在`index.html`中添加选择器用来展现样式：

③ 处理 `scss`和`sass`资源：

（1）安装`sass`、`sass-loader`、`css-loader` 和 `style-loader`：

a、在`css`文件夹下新建`c.scss`，写入如下内容：

b、在`css`文件夹下新建`d.sass`，写入如下内容：

c、在`main.js`中引入`css`文件：

（3）编写打包配置： `webapck.config.js`

（4）在`index.html`中添加选择器用来展现样式：

④ 处理 `styl`资源：

（1）安装`stylus-loader`、`css-loader` 和 `style-loader`：

a、在`css`文件夹下新建`e.styl`，写入如下内容：

b、在`main.js`中引入`css`文件：

（3）编写打包配置： `webapck.config.js`

（4）在`index.html`中添加选择器用来展现样式：

⑤ `webpack`生产模式提取`css`：

（3）安装依赖：`npm install --save-dev mini-css-extract-plugin`

（4）打包配置：`webpack.prod.js`

⑥ `webpack`生产模式进行`css`兼容性处理：

（2）打包配置：`webpack.prod.js`

（3）需要兼容的浏览器配置：`package.json`

⑦ `webpack`生产模式封装样式`loader`：

⑧ `webpack`生产模式压缩`css`：

（2）打包配置：`webpack.prod.js`

a、`b.less`文件内容更改如下：

b、`d.scss`文件内容更改如下：

c、`e.styl`文件内容更改如下：

② 编写打包配置： `webapck.config.js`

② 引入字体图标资源（使用了`Symbol`形式）：

（2）在`src`文件夹下新建`fonts`文件夹，将`iconfont.ttf`、`iconfont.woff`、`iconfont.woff2`三个字体文件放进去

（3）将 `iconfont.css` 文件放入`css`文件夹中，并修改字体文件的引入路径：

（4）将 `iconfont.js` 文件放入`js`文件夹中

（5）在`main.js`中引入`js`文件：

③ 编写打包配置： `webapck.config.js`

④ 在`index.html`中添加选择器用来展现样式：

（1）在`src`文件夹下新建`media`文件夹，将资源文件放进去

（2）以`mp4`资源为例，在`main.js`文件中进行引用：

② 编写打包配置： `webapck.config.js`

5、处理`js`资源（代码格式和兼容性的处理）：

① 代码格式：`eslint`

（2）安装`eslint`（当前安装的版本是`9.30.1`）：

（3）`eslint` 配置文件的不同格式：

a、`.eslintrc`、`.eslintrc.js`、`.eslintrc.json`：`ESLint v8.21.0` 以下使用，需要新建该文件

b、`eslint.config.js`：`ESLint v8.21.0` 以上使用，需要新建该文件

c、`package.json`、`eslintconfig`：直接在该文件中写规则

`ESLint v9` 以下使用

a、 `parseOptions`：规则解析的选项

b、 `rules`：具体检查的规则

c、 `extends`：继承已有的规则

`Eslint官方的规则`：`eslint:recommended`

`Vue2官方推荐规则`：`plugin:vue/essential`

`Vue3官方推荐规则`：`plugin:vue/vue3-essential`、`plugin:vue/vue3-recommended`

`React官方推荐规则`： `plugin:react/recommended`