“webpack 工程师的自我修养”这是一个系列，将持续更新一个月

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从 js 加载 css 开始学习。

我们从下面这个小练习开始走进 webpack 吧

在 index.js 中引入 index.css

前言

最近由于用着html-webpack-plugin觉得很不爽，于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完，但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首先是进入how to write a plugin看了一页简单的介绍。然后教程会告诉你，你需要去了解compiler和compilation这两个对象，才能更好地写webpack的插件，然后作者给了github的链接给你，让你去看源代码，我晕。不过幸好最后给了一个plugins的API文档，才让我开发的过程中稍微有点头绪。

现在做前端开发用 webpack 很多，之前有深入研究过，并且做了很多相关笔记。一直想着整理出来，刚好同事这两天有问到我 webpack 相关的问题，趁着这个机会我自己也好好梳理一下。

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 提供了以下命令：