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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券