前言:
webpack是一种流行的js应用的打包工具。当webpack处理你的应用时,它会递归的形成一个你的应用需要所有模块的依赖图(从entry开始),然后将这些模块打包成一个包或者是多个包。
模块:
提到模块就不得不提一下模块化编程,模块化编程是一种软件设计技术,它强调将程序的功能拆分成独立的可替换的模块,每个模块有负责程序的某个功能的一切,每个模块有一个接口方便验证,调试和测试(一个好的模块需要实体抽象和封装边界,以便模块可以有连贯的设计和明确的目的在整个程序中)。
node.js在开始产生的时候就支持模块化的编程,但是前端(web)的模块支持还未实现。支持前端技术模块化开发的工具存在都有一定的优势和局限。webpack就是在这些工具的基础上产生的新一代。
与node.js单调的模块调用方式不同,webpack支持多种模块引用方法:
1.ES5的 import;
2.common.js的 require();
3.AMD的 define 和 require;
4.css/less/sass 支持的@import;
5.属性中的url 和src
支持的模块类型有:
webpack支持多种开发语言和预处理器,loaders.Loaders向webpack解释如何将这些模块打包,webpack社区已经创建了loaders为多种开发语言和预处理器:
CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus
基本使用:
1.首先引入webpack模块:
npm install webpack
2.命令行运行
webpack --config webpack配置文件的路径
3.编写webpack的配置文件
1.webpack的配置文件是一个抛出一个对象的js文件,这个对象的 options是之后webpack进行处理时的依据;
2.webpack是一个标准的node.jsCommonJS模块,所以可以通过
require('')来引入文件,使用npm模块,使用js控制流?:,定义 常量变量,使用函数生成配置的一部分;(适当使用这些特性)
3.尽量满足以下行为:
写自己的命令行来代替webpack的命令行;
使用相同的输出文件;
可以用多个配置文件来代替一个长的配置文件;
配置文件的名称在team里要有一致性;
entry:
entry指出了webpack形成模块依赖图时的入口文件(你可以根据你的应用的需要提供一个或者多个入口文件)。
output:
output告诉webpack如何命名文件(output.filename)并且在哪里输出打包好的文件(output.path)。
# 我们经常看到的emit和emitted是discharged和produced术语。
loaders:
plugins:
插件的使用方法比loader更加广泛和功能强大(从包优化缩小一直到全局变量)。插件使用之前要先require,由于插件的使用是定制化的,所以你可以在一个配置文件里多次形成插件的多个实例。
领取专属 10元无门槛券
私享最新 技术干货