写在前面
学习 webpack 建议先按照官网指南流程操作一遍，对于指南中不理解的问题建议再看完整个指南后再去研究。webpack 目前最新已经是 5.1.0，指南中有些方法已经过时，在内容最后我整理了操作时遇到的问题。
何为 webpack?
官网定义: 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简单来说 webpack 就是一个前端资源打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应静态资源。下图完美阐释了这一点
为什么会需要使用它?
想象我们最开始学习 html 和 js 写过的 demo，在 html 中通过引入 js 文件，并且在各个 js 文件中互相引用，当时我们的目的是可以运行，这样做并没有什么问题。
当一个正式项目中，有几百上千个 js 文件时，想象一下，调用一个 js 方法，那么浏览器就要依次发送请求去请求这个 js 中所引用别的 js 文件中方法，其中一个因网络问题返回延迟会导致这个页面显示错误。这时候你会想，是不是我把所有 js 文件合成一个文件就好了呢?是的，webpack 就是帮我们做这件事的。webpack 依赖强大的 loader 和 plugins 为前端开发提供了更多的可能。
什么是 bundle?什么是 chunk?什么是 module?
bundle: 是由 webpack 打包出来的文件
chunk: 代码块，是指 webpack 在进行模块依赖分析的时候代码分割出来的代码块。主要体现在
CommonsChunkPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunkmodule: 是开发中的单个模块，在 webpack 中，一个模块对应一个文件，webpack 会从配置的 entry 中递归开始找出所有依赖的模块
核心概念
- 入口(entry): 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到 bundles 文件中。详细介绍
module.exports = {
entry: {
app: './src/index.js'
}
}
- 出口(output): 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为
./dist。详细介绍
module.exports = {
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
- 模式(mode): 通过选择
development或production之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。详细介绍
module.exports = {
mode: "production",
}
- loader: loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。详细介绍
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
- plugins: 插件目的在于解决 loader 无法实现的其他事。详细介绍
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 构建过程开始！");
});
}
}
常见 loader 和 plugins
loader
style-loader: 通过注入