Webpack 一直都是有些人的心魔，不清楚原理是什么，不知道怎么去配置，只会基本的 API 使用。它就像一个黑盒，让部分开发者对它望而生畏。 而本节最大的作用，就是帮大家一点一点的消灭心魔。

【掘金一周12.7】本期看点：从0到1搭建前端监控平台、一文带你全面体验八种状态管理库、签约作者专栏更新动态...

1. 基础 -- 会配置 2. 进阶 -- 能优化 3. 深入 -- 懂原理 一层层晋级打怪 🦖 ，解答不同深度的 Webpack 面试题问题 🤓

早在去年年初的时候，在某乎上刷到了尤大的一条对前端变化的评论（时刻关注着尤大的一言一行对我们这些基于vue 的开发者还是很有用的

css-loader的作用是把css文件里面的内容转化为字符串，放在一个module中，但是并没有把css里面的内容插入到style标签中，这部分工作是style-loader来完成的。

style-loader通过把css字符串写入到style标签并插入到body中，这样就完成了css文件的模块化，即`css in js`。对于图片，也是将其转化为base64的字符串来实现的。

plugin的作用是解决功能定制的问题。complier可以看出是webpack实例化对象，compilation是其中一个重要过程，在这个阶段中提供了很多钩子函数对chunks进行定制。

在vue项目开发中，我们会将经常用到的逻辑或模块抽象成组件，对于那些多个项目都有用到的组件，可以考虑封装成组件库，发布到npm。每次要到只需要npm install xx一下，就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。 组件在使用之前都需要注册组件，注册组件可…

babel-loader是依赖babel的，需要在项目中使用babel的配置文件.babelrc。 在项目根目录配置.babelrc文件。.babelrc是一个json格式的文件，其中主要是对presets和plugins进行配置。plugins是告诉babel要使用那些插件，…