webpack定义
webpack是一个现代的JavaScript应用的静态模块打包工具,从两点来解释就是模块化,打包
在开发项目时可能有许多文件,但是有些文件例如less,sass浏览器不能运行,有些ES6开发在浏览器不能运行,需要转换成ES5,为了文件在浏览器上能够正常运行,需要转化成浏览器能够识别执行的代码。
webpack和gulp对比
gulp的核心时Task(任务),通过配置一系列额task,并且定义task要处理的事务,,之后让gulp来依次执行task,让整个流程自动化,gulp也被称为前端自动化任务管理工具,如果功能模块非常简单或者甚至没有模块化,只进行简单合并,压缩居使用gulp,但是整个项目使用模块化管理且依赖非常强,需要使用webpack。
gulp强调前端流程的自动化,模块化不是它的核心
webpack强调模块化开发管理,而不是压缩合并,预处理等功能,是它附带的功能
webpack的安装
webpack实现需要node环境,node环境为了正常执行很多代码,包含许多各种包,自动安装npm工具,通过npm(node package manage)管理node的各种包
nodejs安装
下载地址: nodejs.例如安装12.18.3版本下载,然后点击安装,下一步即可
安装完,运行cmd,如下安装成功。
然后配置npm的全局安装路径和缓存cache路径
在安装路径下添加两个文件夹
然后cmd下执行
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
然后配置环境变量
全局安装webpack
例如:指定版本号3.6.0
npm install webpack@3.6.0 -g
局部安装webpack
npm install webpack@3.6.0 --save-dev