webpack的配置及使用、打包原理

前端拾光者

已于 2024-09-13 17:00:34 修改

阅读量1.2k

点赞数 39

文章标签： webpack 前端 node.js

于 2024-09-13 16:54:52 首次发布

本文链接：https://blog.csdn.net/jxnd123456/article/details/142212096

版权

在已经搭建好的老项目中，新员工可能不太需要去关注webpack如何配置。由于接触的机会较少，没有实际的使用经验，大多数人可能对webpack还处于一知半解的状态，对于webpack的认知不够全面，也不清楚配置项的具体作用。接下来给大家分享下webpack相关技术知识

一、Webpack 的引入

通常可以通过以下两种方式引入 Webpack：

1. 全局安装（推荐）

 npm install -g webpack webpack-cli

全局安装后，可以在命令行中直接使用 webpack 命令进行项目的打包。

2.项目本地安装

在vscode中打开项目文件夹，再打开vscode终端，(或者直接在项目文件夹那边输

入cmd,回车），在项目所在文件夹的目录下执行以下命令：

   npm install webpack webpack-cli --save-dev

这种方式将 Webpack 安装为项目的开发依赖，只能在项目目录下使用 npx webpack 命令进行打包。

二、配置文件的位置及基本结构

Webpack 的配置文件通常命名为 webpack.config.js，位于项目的根目录下。配置文件是一个 CommonJS 模块，导出一个包含各种配置选项的对象。以下是一个基本的配置文件结构：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 其他配置选项...
};

在上述代码中，我们使用了 Node.js 的内置模块 path 来处理文件路径。配置对象中包含了入口文件（entry）和输出文件（output）的路径等基本配置。

三、全面的配置选项及作用

1. entry（入口）

作用：指定 Webpack 打包的入口文件，Webpack 会从这个文件开始构建依赖图。

示例：

    entry: {
        main: './src/index.js',
        vendor: ['lodash', 'jquery']
    },

注意：这里设置了两个入口，main 是项目的主要入口文件，vendor 是将一些常用的第三方库（如 lodash 和 jquery）单独打包成一个文件，以提高缓存利用率。

2. output（输出）

作用：配置打包后的输出文件的路径和文件名。

示例：

    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },

注意：filename 中的 [name] 会被替换为入口的名称（如 main 或 vendor），[chunkhash] 是根据文件内容生成的哈希值，用于浏览器缓存。publicPath 是打包后的资源在浏览器中的访问路径。

3. module（模块）

作用：配置如何处理不同类型的模块。

示例：

    module: {
        rules: [
            // JavaScript 处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // CSS 处理
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 图片处理
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            },
            // 字体处理
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },

注意：对于 JavaScript 文件，使用 babel-loader 将 ES6+ 语法转换为 ES5 语法。对于 CSS 文件，先使用 css-loader 解析 CSS 文件，再使用 style-loader 将 CSS 插入到页面中，同时添加 postcss-loader 可以对 CSS 进行后处理，如添加浏览器前缀等。对于图片和字体文件，使用 file-loader 进行处理，并指定输出路径。

4. plugins（插件）

作用：通过插件可以扩展 Webpack 的功能，实现各种复杂的任务，如代码压缩、生成 HTML 文件等。

示例：

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    module.exports = {
        //...
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({
                filename: '[name].[contenthash].css'
            }),
            new CleanWebpackPlugin('dist', {
                root: process.cwd()
            })
        ]
    };

注意：HtmlWebpackPlugin 根据指定的模板文件（src/index.html）生成一个 HTML 文件，并自动引入打包后的资源。MiniCssExtractPlugin 将 CSS 从 JavaScript 中提取出来，生成单独的 CSS 文件。CleanWebpackPlugin 在每次打包前清理输出目录，确保输出目录的干净。

5. resolve（解析）

作用：配置模块解析的规则，例如如何查找模块、扩展名等。

示例：

resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
        '@': path.resolve(__dirname, 'src')
    }
},

注意：设置在导入模块时自动尝试的扩展名，当导入一个没有明确扩展名的模块时，Webpack 会依次尝试这些扩展名进行查找。alias 可以设置模块的别名，这里将 @ 别名指向 src 目录，方便在项目中导入模块。

6. optimization（优化）

作用：对打包过程进行优化，提高性能和减小打包后的文件体积。

示例：

    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        },
        runtimeChunk: {
            name: 'runtime'
        }
    },

注意：splitChunks 用于代码分割，将公共模块提取到单独的文件中，减少重复代码，提高缓存利用率。cacheGroups 可以定义不同的缓存组，这里将第三方库打包到 vendors 组，其他满足条件的模块打包到 default 组。runtimeChunk 将运行时代码提取到单独的文件中，避免每次修改业务代码都导致运行时代码的变化。

7. devServer（开发服务器）

作用：在开发过程中提供一个本地开发服务器，实现热更新等功能。

示例：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    hot: true,
    open: true
},

注意：contentBase 指定服务器的根目录，compress 表示启用 gzip 压缩，port 设置服务器的端口号，hot 开启热更新功能，open 在服务器启动时自动打开浏览器。

四、Webpack 的打包命令及原理

1. 打包命令：

如果是全局安装的 Webpack，可以在项目目录下直接运行 webpack 命令进行打包。

如果是项目本地安装的 Webpack，可以使用 npx webpack 命令进行打包。

2. 原理：

Webpack 以指定的入口文件为起点，开始构建依赖图。它会递归地分析入口文件及其依赖的模块，确定所有需要打包的模块。

对于不同类型的模块，Webpack 会根据配置的 module.rules 使用相应的 loader 进行处理。例如，对于 JavaScript 文件，可能会使用 babel-loader 进行转译；对于 CSS 文件，可能会使用 css-loader 和 style-loader 进行处理。

处理完所有模块后，Webpack 将它们打包成一个或多个输出文件，根据配置的 output 选项确定输出文件的路径和文件名。

在打包过程中，Webpack 还可以通过插件进行各种额外的操作，如代码压缩、生成 HTML 文件等。

觉得还不错的话，不妨点个赞再走(｡･ω･｡)