1. Entry
表示从哪个文件为入口起点开始打包，分析构建依赖图，可以定义单个或者多个，对应的，可以构建出单页或者多页应用，一般会跟output成对出现。
//单入口
entry: path.resolve(__dirname, "./src/index.js"),
//多入口
entry: {
index1: path.resolve(__dirname, "./src/index1.js"),
index2: path.resolve(__dirname, "./src/index2.js"),
}
2. Output
表示打包后的资源输出到哪里，以及命名规则，对应entry多文件入口的情况写法，如果要支持CJS、UMD、ESM、html页面直接引入，都是在这里通过配置实现的。
这里的[name].js表示出口的文件名和多入口的文件名保持一致，这样的话可以做到不同的页面加载不同的js页面。
//单出口
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
}
//多出口
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
}
3. Loader
因为webpack只能处理js/json资源，不能处理类似css/img等其他资源，所以需要通过loader支持来处理其他资源，以下是常用的loader:
-
babel-loader：转换es6,es7的语法 --- 文件转换 -
css-loader：css文件的加载和解析 --- 文件转换 -
less-loader：将less转换成css--- 文件转换 -
ts-loader：TS转JS--- 文件转换 -
file-loader：静态资源加载 --- 文件转换 -
raw-loader：静态资源内联，读取文件以字符串加载进入首屏，可用于移动端做适配时使用，比如在使用rem时，需要计算根节点的字体大小，计算大小要优先于单页应用的JS执行，可以把计算rem的代码以内联脚本的形式插入到html中优先执行。 -
thread-loader：多进程打包提高打包速度 ---build优化
4. Plugins
Plugins可以用于执行范围更广的任务，插件的范围包括，从打包优化到压缩，到定义环境变量等，以下是常用的Plugins：
-
CommonsChunkPlugin：将chunk相同的模块代码提取成公共JS（chunk：webpack运行时的各个文件一个状态，之后会组合成最终产物bundle） -
CleanWebpackPlugin：清理构建目录 -
ExtractTextWebpackPlugin：将css从bundle文件中提取成一个独立的css文件 -
CopyWebpackPlugin：文件或者目录拷贝 -
HtmlWebpackPlugin：创建html承载bundle，最终文件无论是JS还是css都需要html来承载展示。
5. Mode
指的是webpack使用相应模式的配置，它有以下两个选项：
（1）development，开发环境，它会默认开启以下选项：
-
NamedChunksPlugin：当开启HMR的时候，显示更新包的名字。 -
NamedModulesPlugin：当开启HMR的时候，显示更新包的相对路径。
（2）production，生产环境，它会默认开启以下选项：
-
FlagDependencyUsagePlugin：编译时标记依赖 ---tree-shaking相关 -
FlagIncludedChunksPlugin：防子chunks多次加载 ---tree-shaking相关 -
ModuleConcatenationPlugin：作用域提升(scope hosting) ---scope hosting -
NoEmitOnErrorsPlugin：在输出阶段时，遇到编译错误跳过 --- 编译优化 -
OccurrenceOrderPlugin：给经常使用的ids更短的值 --- 编译优化 -
SideEffectsFlagPlugin：识别package.json或者module.rules的sideEffects标志（纯的ES2015模块)，安全地删除未用到的export导出 ---tree-shaking相关 -
UglifyJsPlugin：删除未引用代码，并压缩 --- 代码优化
网友评论