(1). 构建工具的作用:
- 转换ES6语法.
- 转换JSX.
- CSS前缀补全、预处理器.
- 压缩混淆.
- 图片压缩.
1. 静态模块打包器:
- 将入口文件引入的各种资源 => chunk(块) => less转换为css、es6转换为es5 => bundle(输出内容)
- 将所有资源文件(js/css/html/less/json...)当做模块处理.
- 根据模块的依赖关系进行静态分析.
- 打包生成对应的静态资源(bundle).
2. 5个核心:
(1). Entry:
- 入口(Entry): a. 指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图.
(2). Output:
- 输出(Output): a. 指示webpack打包后的资源bundles输出到位置. b. 命名规则.
(3). Loader:
- Loader让webpack能够去处理那些非JavaScript文件: a. 相当于"翻译",将css、图片等"翻译"成webpack能识别的资源.
- webpack自身只理解JavaScript.
(4). Plugins:
- 插件(Plugins)用于执行范围更广的任务: a. loader只能做"翻译".
- 插件的范围包括: a. 从打包优化和压缩,一直到重新定义环境中的变量等.
(5). Mode:
- 指示webpack使用相应模式的配置.
- 选项 - development: a. 会将DefinePlugin中process.env.NODE_ENV的值设置为development. b. 启用NamedChunksPlugin和NamedModulesPlugin. c. 能让代码本地调试运行的环境.
- 选项 - production: a. 会将DefinePlugin中process.env.NODE_ENV的值设置为production. b. 启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin. c. 能让代码优化上线运行的环境. d. 比开发环境多了压缩功能,开发模式下打包的文件还可能看的到.
3. webpack install:
// webpack4将webpack与webpack cli分离了
yarn add webpack webpack-cli -D(1). npm run指令:
- 原理: a. 模块局部安装会在node_modules/.bin目录创建软链接