Webpack快速上手（六）依赖图

简介

webpack会将多个文件打包到一个bundle中，项目较大的情况下，想要在webpack的bundles中找到依赖关系非常难。好在我们可以通过插件，使webpack构造的bundles的依赖关系通过依赖图的方式展现出来，方便我们查看有无重复依赖等问题。

安装与使用

首先安装webpack-bundle-analyzer插件：

npm i webpack-bundle-analyzer -D

然后需要在webpack.config.js中做如下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    entry: {
        index:'./src/index.js',
        a: './src/a.js'
    },
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            filename:'[name].html'
        }),
        new BundleAnalyzerPlugin()
    ]
}

修改完成后，运行webpack-dev-server，依赖图会自动启动，端口8888

这样bundles中的文件的依赖关系就一目了然了。