webpack基础

ᥬ 小月亮2025-07-06 13:21

一、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

javascript 复制代码 
<!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文件

javascript 复制代码 
export default function sum(a, b) {
    return a + b;
}

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

javascript 复制代码 
import sum from './js/sum.js'
console.log(sum(5,6))

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

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

javascript 复制代码 
// 引入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，写入如下内容：
javascript 复制代码 
.box1 {
    width: 100px;
    height: 100px;
    background: pink;
}

在main.js中引入css文件：

javascript 复制代码 
import sum from './js/sum.js'
// 引入css资源
import './css/a.css'
console.log(sum(5,6))
（3）编写打包配置： webapck.config.js
javascript 复制代码 
// 引入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

javascript 复制代码 
<!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，写入如下内容：
javascript 复制代码 
.box2 {
    width: 100px;
    height: 100px;
    background: deeppink;
}
b、在main.js中引入css文件：
javascript 复制代码 
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
javascript 复制代码 
// 引入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

javascript 复制代码 
<!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，写入如下内容：
javascript 复制代码 
.box3 {
    width: 100px;
    height: 100px;
    background: rgb(236, 33, 67);
}
b、在css文件夹下新建d.sass，写入如下内容：
javascript 复制代码 
.box4
    width: 100px;
    height: 100px;
    background: rgb(131, 0, 0);
c、在main.js中引入css文件：
javascript 复制代码 
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
javascript 复制代码 
// 引入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

javascript 复制代码 
<!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，写入如下内容：
javascript 复制代码 
.box5
    width 100px
    height 100px
    background rgb(233, 130, 12)
b、在main.js中引入css文件：
javascript 复制代码 
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
javascript 复制代码 
// 引入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

javascript 复制代码 
<!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

javascript 复制代码 
// 引入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之后，预处理器之前

javascript 复制代码 
// 引入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
javascript 复制代码 
{
  "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：

javascript 复制代码 
// 引入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
javascript 复制代码 
// 引入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文件内容更改如下：
javascript 复制代码 
.box2 {
    width: 100px;
    height: 100px;
    background: url("../images/1.png") no-repeat;
    background-size: cover;
}
b、d.scss文件内容更改如下：
javascript 复制代码 
.box4 {
    width: 100px;
    height: 100px;
    background: url("../images/2.png") no-repeat;
    background-size: cover;
}
c、e.styl文件内容更改如下：
javascript 复制代码 
.box5
    width 100px
    height 100px
    background url("../images/3.svg") no-repeat
    background-size cover

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

javascript 复制代码 
// 引入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文件夹中，并修改字体文件的引入路径：
javascript 复制代码 
@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文件：
javascript 复制代码 
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

javascript 复制代码 
// 引入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中添加选择器用来展现样式：

javascript 复制代码 
<!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文件中进行引用：
javascript 复制代码 
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

javascript 复制代码 
// 引入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

文档：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文件代码）：
javascript 复制代码 
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文件，写入如下内容：

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

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

javascript 复制代码 
dist
ESLint v9 以上使用

安装 @eslint/js ：npm install --save-dev @eslint/js

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

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

javascript 复制代码 
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）：
javascript 复制代码 
// 引入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中编写配置：
javascript 复制代码 
// 引入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文件：
javascript 复制代码 
const add = (a,b) => {
    return a+b
}

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

module.exports = {
    add,
    sub
}
c、在main.js文件中引用并且使用：
javascript 复制代码 
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文件：
javascript 复制代码 
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

javascript 复制代码 
// 引入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

javascript 复制代码 
// 引入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文件中的内容：

javascript 复制代码 
// 引入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文件中的内容：

javascript 复制代码 
// 引入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中进行简写：

javascript 复制代码 
{
  "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"
  }
}
相关推荐
wordbaby4 分钟前
TanStack Router 基于文件的路由
前端
wordbaby9 分钟前
TanStack Router 路由概念
前端
wordbaby12 分钟前
TanStack Router 路由匹配
前端
cc蒲公英12 分钟前
vue nextTick和setTimeout区别
前端·javascript·vue.js
程序员刘禹锡17 分钟前
Html中常用的块标签!!!12.16日
前端·html
我血条子呢28 分钟前
【CSS】类似渐变色弯曲border
前端·css
DanyHope28 分钟前
LeetCode 两数之和：从 O (n²) 到 O (n)，空间换时间的经典实践
前端·javascript·算法·leetcode·职场和发展
hgz071029 分钟前
企业级多项目部署与Tomcat运维实战
前端·firefox
用户18878710698430 分钟前
基于vant3的搜索选择组件
前端
zhoumeina9930 分钟前
懒加载图片
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04RedissonClient的配置解析05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07BongoCat - 跨平台键盘猫动画工具08Open-AutoGLM Windows 安装部署教程09Labelme从安装到标注：零基础完整指南10jdk21下载、安装（Windows、Linux、macOS）