webpack的构建流程

Webpack 构建流程详解

Webpack 是一种现代 JavaScript 应用程序的静态模块打包工具，其构建流程主要分为以下几个阶段：

1. 初始化阶段

在这一阶段，Webpack 加载配置文件 webpack.config.js 并解析其中的内容。它会读取所有的选项、入口文件以及插件设置。

示例代码：

javascript 复制代码

const path = require('path');

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

此部分定义了项目的入口文件和输出路径。

2. 编译阶段

在此阶段，Webpack 开始遍历依赖树并加载相应的模块。对于每一个模块，Webpack 都会应用对应的 Loader 来对其进行预处理（如转码 ES6 到 ES5 或者将 SASS 转化为 CSS）。Loader 的作用是对单个文件进行转换。

示例代码：

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    }
};

这段代码展示了如何利用 Babel 将 .js 文件从 ES6 转换为兼容性更好的版本。

3. 打包阶段

当所有模块被编译完成后，Webpack 进入打包阶段，在该阶段中，它会对已编译好的资源进一步优化、分割或压缩。例如，可以通过配置来移除未使用的代码或者缩小文件体积。

示例代码：

javascript 复制代码

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()]
    }
};

上述片段设置了使用 Terser 对最终产物进行最小化处理。

4. 输出阶段

最后一步就是将经过前面几个步骤处理后的资产写入磁盘上的目标位置。这通常意味着生成一个或多个 JS 文件以及其他可能的附属资源（比如样式表）。

示例代码：

javascript 复制代码

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/assets/',
    filename: '[name].[contenthash].js'
}

这里指定了输出的具体细节，包括哈希值用于缓存控制。

综合实例展示完整的 Webpack 流程

下面给出了一套较为全面的例子，涵盖了以上提到的主要方面：

javascript 复制代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: ['./src/js/app.js', './src/scss/style.scss'], // 多入口支持
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.[contenthash].js'
    },
    devtool: false,
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new MiniCssExtractPlugin(),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        minimizer: [new TerserPlugin()],
    }
};

此综合案例不仅实现了基本功能还加入了 HTML 自动生成、CSS 单独提取等功能，并且启用了生产模式下的代码分离与压缩策略。