简介
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中的文件的依赖关系就一目了然了。