1.webpack的作用

• 将浏览器不能够识别的前端静态资源 打包成浏览器能够识别的资源文件

很多前端项目在打包的时候都直接或者间接地使用了webpack，过去那么多年做前端开发，一直使用的Vue和React框架，其实它们也依赖于webpack打包的。可能Vue会越来越多的使用vite打包，因其作者尤雨溪刚发布了vite 2.0，一个类似webpack的工具，相比webpack有很多的优势，这里不对vite做过多的解释，感兴趣的朋友可以去看看官方文档。

作为一个技术开发人员，我觉得有必要搞懂我们正在使用的工具，这样才能更好的使用它们，就拿webpack来说，需要思考下面3个问题，简称3H。

前面HMR和source-map是开发环境下的优化，下面我们要为生产环境优化一下，首先就是缓存。

目录

1. 前言
2. 初始化项目
3. webpack基础配置
4. webpack开发环境配置
5. webpack打包环境配置
6. 参考

在多人开发中，代码里有时候会有一些无用的代码，因此在生产环境打包构建的时候就需要去除掉，我们可以使用webpack默认的tree shaking。必须满足以下两个条件：

Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

写作背景：

为了更合适且方便地使用配置，可以在 webpack.config.js 中对 webpack 进行配置。CLI 中传入的任何参数都会在配置文件中映射为对应的参数。

命令集合

webpack-cli 提供了许多命令来使 webpack 的工作变得简单。默认情况下，webpack 提供了以下命令：

package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。

去年，阿里云发布了本地 IDE 插件 Cloud Toolkit，仅 IntelliJ IDEA 一个平台，就有 15 万以上的开发者进行了下载，体验了一键部署带来的开发便利。时隔一年的今天，阿里云正式发布了 Visual Studio Code 版本，全面覆盖前端开发者，帮助前端实现一键打包部署，让开发提速 8 倍。

VSCode 版本的插件，目前能做到什么？

安装插件之后，开发者可以立即体验以下任何一个功能：