前端模块化打包工具——webpack的深入学习

如何在项目中使用webpack将文件进行打包，处理资源，配置开发环境，上线环境等？

一.webpack的简单介绍：

官网：https://webpack.js.org

githup地址:https://github.com/webpack/webpack

        webpack是为javascript准备的打包工具，可以将多个模块打包成很少的静态文件，以下是webpack官网介绍的，简短的打包过程：

webpack会将左侧的文件当成一个一个模块，模块之间还会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后打包成右侧的以js,css,png等结尾的文件，以上就是一个简单的打包过程。

它有什么特点呢：

1.能够整合第三方的类库，将第三方的类库也当成一个模块，在项目中应用。

2.减少初始化加载的时间。

3.每个文件都可以当成一个模块，应用到项目当中。

4.有自定义功能，每个模块都可以自定义，做自己想做的事。

5.适合大型项目

二.webpack的安装以及简单的打包命令

1.进入到指定的目录下:  cd + 目录名

2.初始化npm: npm init

3.安装webpack: npm install webpack --save-dev

4.打包文件的命令：webpack  fileName   fileName1  

三.webpack四个核心概念

简单概括：

入口（entry）:指定一到多个模块为入口文件，通过入口文件判断哪些文件有直接依赖关系和间接依赖关系，随后将这些有依赖关系的文件进行处理，放到名为bundles文件当中；

出口（input）:在入口被处理后的文件（bundles）,output的作用就是将被处理后的文件输出到哪个文件下，以及如何命名终端的文件；

loader：它的作用是让webpack处理非js的文件，因为webpack只支持js文件，所以其他类型的需要处理。1.识别对应的loader进行转换的文件，test属性2.转换这些文件，能被添加到依赖图（就是加入到打包过程中），use属性；

插件(plugins)：插件是用来扩展新应用的，比如打包优化，压缩，重新定义环境变量，可以处理很多的任务；

详细介绍：

1.入口（entry属性）:

 有多种方式去定义：

只需要一个入口起点的，也就是单个入口语法：

多个入口起点的，对象语法（）

 更新中。。。。。