使用Webpack的配置文件-1

weixin_42915158 2023-01-13 02:18:35

课时名称	课时知识点
使用Webpack的配置文件-1	掌握使用Webpack的配置文件

...全文

89 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

目录一、webpack-bundle-analyzer是什么？二、安装三、使用方法1. 作为插件使用2. 作为CLI的一个工具webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。

【前端】webpack5的配置及基本使用。【前端】webpack5常用loader和plugin。今天我们来看一下webpack-dev-server，它是什么呢？大家有没有发现，在前面两篇博客的例子中，我们每次修改完js文件后，都需要再次打包，然后再用浏览器打开生成的html文件。但是我们在使用vue-cli开发项目时，一修改文件，就会立刻重新编译，然后页面自动发生变化，webpack-dev-server就是完成这一功能的。webpack-dev-server就是一个小型的静态文件服务器。

@vue/cli 4 项目中安装 webpack-bundle-analyzer 分析包，来查找需要优化的文件1、安装2、修改 vue.config.js和 package.json3、运行分析包在安装 webpack-bundle-analyzer 分析包之前，在项目中可以通过 npm list vue 查看项目所使用的 @vue 版本以及运行 vue -V 查看项目所使用的 @vue/cli 版本。 1、安装 webpack-bundle-analyzer 可视化资源分析工具可以直观地分析打包出的

说在前面 webpack作为一个知名的前端工程打包工具，为我们提供了很大的便利，打包后的文件晦涩难懂，但是当我们尝试打包调优时，又不得不去了解下打包的细节，了解某一个文件是由哪些内容打包而成，下面给大家介绍一种工具。开门见山 webpack-bundle-analyzer文件可以很形象的展示打包的细节。安装： # NPM npm install --save-dev webpack-bundle-analyzer // # Yarn yarn add -D webpack-bundle-analyze

这两天准备亲手搭建一个react项目，本以为会很顺利，没想到遇到了很多兼容性的问题。刚开始遇到webpack和babel的版本不兼容，之后使用webpack-dev-server搭建服务器遇到安装的webpack和webpack-dev-server版本不兼容的问题。作为一名前端小白的我表示心很累。现象：安装webpack之后运行正常，再安装不同版本的webpack-dev-server，出...

余其方的课程社区_NO_1

1

社区成员

14

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章