新手必看的Webpack 基础

webpack 是什么呢？有什么用呢？

1.是前端资源模块化管理和打包工具。

2.可以使前端开发更加模块化。详细来讲就是：将松散的模块按依赖、规则打包成符合当前环境部署的前端资源；按需（异步）加载；通过loader转换，任何资源都可视作模块，比如 CommonJS、AMD、ES6、JSON、LESS、图片等。

webpack 常见的一些名词解释：

• chunk ：打包后的代码块。包含多个module，存在于webpack处理过程中的阶段。不是所有的chuncks都会成为最终的输出文件。
• bundle：由一个或许多不同的chuncks生成，包含源码处理后的最终版本。
• module：是webpack支持解析的模块。
• runtime：模块交互时，链接模块所需的加载和解析逻辑。

核心概念 ：1. 入口 2. 输出 3. loader 4. 插件

一、入口：
入口可以被认为是根上下文 或 app第一个启动文件。

语法：

1. 单个入口语法 entry: string | Array ， 向entry传入一个数组将会创建多个主入口（会由多个彼此分离的依赖图）。

2. 对象语法 entry: { [ entryChunkName : string ]: string | Array }，繁琐但可扩展度高。

多入口场景：1.分离 应用程序 和 公共库。2.多个页面应用程序。

注意：不推荐在 library 中使用数组作为 entry。

二、输出：
即使可以存在多个入口起点，但只指定一个输出配置。

语法：
output: { filename : string }，如果多个入口，应使用占位符来确保每个文件具有唯一的名称，eg: filename: ‘[name].js’。

三、模式 mode： 告知webpack使用相应模式的内置优化模式。

语法：
mode: string，默认为 ‘production’，应使用占位符来确保每个文件具有唯一的名称，eg: filename: ‘[name].js’。

参数：

1.development：开发环境。

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。启用 NamedChunksPlugin 和 NamedModulesPlugin。

2.production: 生产环境。

启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

四、插件 plugin： 旨在解决 loader 无法实现的其他事。

插件是一个具有 apply 属性的js 对象。plugins 参数中传入new实例。

其他常用配置

一、loader：
用于对模块的源代码进行转换。在 import 或 “load(加载)” 模块时预处理文件。

为什么需要loader 呢？
因为集成的模块都需要转变为 js 可识别与运行的代码。

语法： test属性：用于标识出应该被对应的 loader 进行转换的某个或某些文件；use属性：表示进行转换时，应该使用哪个 loader。 eg：{ test: /.css$/, use: ‘css-loader’ },

二、resolve： 配置模块如何解析。

为什么需要loader 呢？
因为集成的模块都需要转变为 js 可识别与运行的代码。

语法： resolve: { object }

常见属性：

1. extensions：自动解析确定的扩展。默认值为 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]

2. alias：创建 import 或 require 的别名，来确保模块引入变得更简单。 eg：alias:{‘SRC’: path.join(__dirname, ‘..’, “src”)}

3. module：包含的选项决定了如何处理项目中的不同类型的模块。

   常见属性：rules，属性为 test, include, exclude 和 resource等组成的对象数组。