一. webpack的特点:
12年, webpack就诞生了. 为了让开发者集中精力开发业务代码,
-
- 支持多种生态(前端和node都可以)
- 打包的过程是node环境中运行的.
- 基于模块化. 模块内部可以使用es6标准和commonjs标准, webpack都支持.
- 打包的结果是一个普通函数
webpack 1.将一切都视为模块, 2, 递归分析依赖关系, 3. 打包成为可以运行的文件.
二.webpack安装
前提: npm init 初始化,生成package.json.
1.本地, 而不是全局 安装
2. 命令: npm i -D webpack webpack-cli;
-D ; 是因为运行时的代码是webpack打包完成后的代码, 不参与运行的都用-D
webpack是webpack的核心包, 含有打包时候调用的所有api
webpack-cli 是调用webpack核心包api的api, 是个cli命令工具, 如果知道webpack核心包的api, 可以自己写个js调用, 就不需要cli命令了.
三. 使用
1. 创建webpack项目的目录结构
- package.json (初始化时候形成的文件))
- src (以后写代码的目录. 注意,src中的代码导入导出可以用commonjs规范, 也可以用es6, 因为这里的代码会被webpack识别)
-index.js
2. 运行打包命令 只需要一个单词---webpack就能自动打包 : npx webpack
3. 打包结果, 是一个普通的函数, nodejs和html文件都能运行
注意: 1. 导入时候, 自己写的文件和node_modules目录下文件的区别:
是自己写的用./或者../这种; 不是自己写的直接写包名
如: import a from "./a" a文件是自己写的
import jquery from "jquery"
2. src中的代码, 导入导出可以用任意的commonjs或es6,规范, 甚至用commonjs导出, 用es6导入;
因为分析导入导出这活是webpack来干的, 就是专业分析依赖关系并处理这个的.这种导入导出的代码是一个依赖关系的说明而已,
四. webpack是如何处理依赖关系的.
1. 同标准模块化导入导出. 即用es6导入导出, 或者用commonjs导入导出.
2 不同标准模块化
es6 导出, commonjs导入: 相当于es6的import * as XX from "./a";
注意: es6中默认导出的情况, 一下情况只能用obj.default接受, obj.default = {a:1,b:2,c:3}
因为require的值是全部es6的导出, 即一个对象{default:{a:1,b:2,c:3}}
commonjs 导出, es6 导入: 相当于 require;