初识WebPack

初识WebPack

一、什么是webpack

我所理解的webpack，主要是从两个方面出发，一是webpack是一个前端构建器，二是webpack是一个静态模块打包器。

1、前端构建工具

1-1、为什么要使用构建工具
　　　　 由于目前的浏览器种类繁多，大部分对于Es6等语法还是不能够兼容的。使用构建工具可以帮助转换Es6语法、转换JSX、css前缀补全、预处理器等。
　　　2、静态模块打包器

webpack会从入口文件开始，根据依赖关系，一层一层的递归打包成bundles输出到目标文件中。

二、为什么要用webpack

在目前前端模块化开发的趋势下，webpack起到了很大的作用。在使用各种css预处理器的时候，我们只需要注重代码的编写，至于最后怎么转换成浏览器识别的css,完全可以交给webpack来做。此外webpack在打包项目的过程中，可以很方便的合并js,css等文件，压缩代码，优化性能。

三、初识webpack
1、webpack默认配置文件为webpack.config.js，但是也可以通过webpack --config来指定配置文件。
2、webpack配置组成：

四、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启用的优化包会更多。

五、初体验webpack

但是此时会有一个问题，就是每次运行构建时都需要运行./node_ modules/.bin/webpack是非常麻烦的所以需要去到package.json文件里添加
scripts：{
“build”:“webpack”
}