我正在尝试为 webpack-bundle-analyzer 配置我的 webpack.config。这是它的外观。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
它只显示 index.js、main.js 和 src 文件夹。如何查看我所有的其他依赖项?
最佳答案
第一的
npm install --save-dev webpack-bundle-analyzer
其次,在 webpack.config.js 中添加一些配置
这是我在 config/webpack.config.js 中使用 create react app 时的配置
在顶部导入库
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
还添加一些验证,以便您的构建脚本在部署到生产时不会出现问题
const withReport = process.env.npm_config_withReport
在插件中添加此代码
plugins:[
withReport ? new BundleAnalyzerPlugin() : '',
]
最后,在包 JSON 中添加一个新脚本
"report": "npm run build --withReport true"
在终端中运行“npm run report”。应该会自动出现 webpack 包分析器 UI
关于reactjs - 如何为 react 配置 webpack-bundle-analyzer?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58109769/