2-5 浅析webpack打包内容

1. 简介

本节主要分析运行打包命令以后的输出内容。

2.打包内容分析

package.json如下 ：

const path = require('path');

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

运行打包命令，输出如下内容：

image.png

Hash：本次打包的一个标识。 Version：使用的webpack版本 Time：本次打包耗时 Built at: 生成时间

Asset列：指构建后输出的资源文件，名称由filename的配置决定，如可能是[name].[hash].js这样子 Size列：指构建后输出的资源文件的大小 Chunks列：列出所有的chunk id emitted: 表示该文件 Chunk Names: 指这个构建块的名称，即各个chunk块输出期间chunk块名称，比如entry配置项里定义的入口名称、CommonsChunkPlugin里定义的名称等等。

Entrypoint：打包入口文件。 [0]: chunk id 为0的chunk入口文件及其依赖的模块信息。

Warning: 提示。此处提示我们mode未设置，就会自动选择production。而mode其实其实可以理解为一系列配置集合组成的某种模式。如下：

image.png

ps: 之所以chunkname是main，其实是在entry指定的，是如下配置的简写：

const path = require('path');

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

我们也可以输出更详细的内容，如下，添加stats: detailed配置：

const path = require('path');

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

运行命令后如图：

image.png

可以明确看到每个chunk的入口和输出信息，以及每个模块的导出信息。

参考

webpack打包时终端参数各代表什么意思？ webpack的chunks和bundle是什么意思？ webpack4.0各个击破（4）—— Javascript & splitChunk webpack 的开发者模式 显示asset 详细信息 理解webpack4.splitChunks