如何在项目中使用webpack将文件进行打包,处理资源,配置开发环境,上线环境等?
一.webpack的简单介绍:
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属性):
有多种方式去定义:
只需要一个入口起点的,也就是单个入口语法:
多个入口起点的,对象语法()
更新中。。。。。