(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目录创建软链接