一、什么是webpack
我所理解的webpack,主要是从两个方面出发,一是webpack是一个前端构建器,二是webpack是一个静态模块打包器。
1、前端构建器
webpack只能识别js和json文件,所以在引入其他比如样式文件,图片资源等webpack不能识别的资源时,需要通过loader来构建。
2、静态模块打包器
webpack会从入口文件开始,根据依赖关系,一层一层的递归打包成bundles输出到目标文件中。
二、为什么要用webpack
在目前前端模块化开发的趋势下,webpack起到了很大的作用。在使用各种css预处理器的时候,我们只需要注重代码的编写,至于最后
怎么转换成浏览器识别的css,完全可以交给webpack来做。此外webpack在打包项目的过程中,可以很方便的合并js,css等文件,压缩代
码,优化性能。
三、webpack的五个基本要素
1、entry
entry指的是webpack的入口文件,指定webpack打包静态模块是从哪里开始。
2、output
output主要是声明打包后的bundles要输出到哪里地方。
3、loader
loader主要使用把webpack不能识别的文件转换成webpack可识别的,类似于翻译官。
4、plugins
plugins主要是用于指定webpack在什么阶段,要做什么事情。
5、mode
mode是指打包的方式是development还是production。production模式下webpack启用的优化包会更多。