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

时间:2021-09-17 18:38:04

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

一.webpack的简单介绍:

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

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

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

前端模块化打包工具——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属性):

 有多种方式去定义:

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

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

多个入口起点的,对象语法()

 更新中。。。。。