webpack
webpack是一个构建工具,中文名称叫“静态资源打包器”。
一、webpack简介
相对于原始的web前端开发(html+js+css),现在有很多的新技术。
我最先接触到的是less,它支持变量、嵌套等功能,能帮助我更好的维护项目的css样式。
然而,在使用less的过程中,虽然有管理css样式方便了;但是每次发版的时候还需要先把less文件先转成css文件才行;否则浏览器也不能识别,导致报错。
还有我们使用module.exports模块化编写js时,发版时也需要先进行编译后浏览器才能识别。
因为这些种种的不方便,导致我们公式的项目一直还停留在最原始的html+js+css的阶段;严重印象了开发人员学习新技术的动力。
既然出现这种重复性的操作,那就给程序员展现技术的时候了。
webpack就是把以上重复操作整合的一个构建工具。
二、基础概念
- 模块(chunk):前端的所有资源文件(js/json/css/less/img…)都作模块。
开发环境
- 资源(bundle):打包生成的静态资源。
生产环境
三、核心概念
- Netry: 入口,项目的入口文件;需根据此文件摇树,找到所有使用的资源文件。
- Output:出口,打包后的输出资源需要如何命名,放到哪儿。
- Loader:解析,负责处理js以外的文件,如less(webpack本身只能处理js/json等)。
- Plugins:插件,负责处理更复杂的任务,如压缩。
- Mode:模式,development开发(开发调试用)、 production生产模(上线发版用)。
四、npm指令
- npm init
npm初始化,在项目中创建npm配置相关资源
- npm i webpack webpack-cli -g
全局安装webpack
- npm i webpack webpack-cli -D
局部安装webpack,及安装到单个项目中
五、webpack指令
- webpack ./src/xxx.js -o ./bundle/bundle.js --mode=development
以xxx.js为入口打包编译到bundle.js
六、其他
更多webpack内容: