初学者应该看的 Webpack 完整指南（2020）
共 11989字，需浏览 24分钟
·
2020-08-18 20:36
我们应该学习 webpack 吗 ？
如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。
即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。
在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我们的日常需求。
什么是 webpack？
作为前端开发人员，我们应该熟悉 module 概念。你可能听说过 AMD模块，UMD，Common JS还有ES模块。
webpack是一个模块绑定器，它对模块有一个更广泛的定义，对于webpack来说，模块是：
Common JS modules AMD modules CSS import Images url ES modules
webpack 还可以从这些模块中获取依赖关系。
webpack 的最终目标是将所有这些不同的源和模块类型统一起来，从而将所有内容导入JavaScript代码，并最生成可以运行的代码。
entry
Webpack的 **entry(入口点)**是收集前端项目的所有依赖项的起点。实际上，这是一个简单的 JavaScript 文件。
这些依赖关系形成一个依赖关系图。
Webpack 的默认入口点（从版本4开始）是src/index.js，它是可配置的。webpack 可以有多个入口点。
Output
output是生成的JavaScript和静态文件的地方。
Loaders
Loaders 是第三方扩展程序，可帮助webpack处理各种文件扩展名。例如，CSS，图像或txt文件。
Loaders的目标是在模块中转换文件（JavaScript以外的文件）。文件成为模块后，webpack可以将其用作项目中的依赖项。
Plugins
插件是第三方扩展，可以更改webpack的工作方式。例如，有一些用于提取HTML，CSS或设置环境变量的插件。
Mode
webpack 有两种操作模式：开发(development)和生产(production)。它们之间的主要区别是生产模式自动生成一些优化后的代码。
Code splitting
代码拆分或延迟加载是一种避免生成较大包的优化技术。
通过代码拆分，开发人员可以决定仅在响应某些用户交互时加载整个JavaScript块，比如单击或路由更改(或其他条件)。
被拆分的一段代码称为 chunk。
Webpack入门
开始使用webpack时，先创建一个新文件夹，然后进入该文件中，初始化一个NPM项目，如下所示：
mkdir webpack-tutorial && cd $_
npm init -y
接着安装 webpack，webpack-cli和 webpack-dev-server：
npm i webpack webpack-cli webpack-dev-server --save-dev
要运行 webpack，只需要在 package.json 配置如下命令即可：
"scripts": {
"dev": "webpack --mode development"
},
通过这个脚本，我们指导webpack在开发模式下工作，方便在本地工作。
Webpack 的第一步
在开发模式下运行 webpack:
npm run dev
运行完后会看到如下错误：
ERROR in Entry module not found: Error: Can't resolve './src'
webpack 在这里寻找默认入口点src/index.js，所以我们需要手动创建一下，并输入一些内容:
mkdir src
echo 'console.log("Hello webpack!")' > src/index.js
现在再次运行npm run dev，错误就没有了。运行的结果生成了一个名为dist/的新文件夹，其中包含一个名为main.js的 JS 文件：
dist
└── main.js
这是我们的第一个webpack包，也称为output。
配置 Webpack
对于简单的任务，webpack无需配置即可工作，但是很快我们就会遇到问题，一些文件如果没有指定的 loader 是没法打包的。所以，我们需要对 webpack进行配置，对于 webpack 的配置是在 webpack.config.js 进行的，所以我们需要创建该文件：
touch webpack.config.js
Webpack 用 JavaScript 编写，并在无头 JS 环境（例如Node.js）上运行。在此文件中，至少需要一个module.exports，这是的 Common JS 导出方式：
module.exports = {
//
};
在webpack.config.js中，我们可以通过添加或修改来改变webpack的行为方式
entry point output loaders plugins code splitting
例如，要更改入口路径，我们可以这样做
const path = require("path");
module.exports = {
entry: { index: path.resolve(__dirname, "source", "index.js") }
};
现在，webpack 将在source/index.js中查找要加载的第一个文件。要更改包的输出路径，我们可以这样做：
const path = require("path");
module.exports = {
output: {
path: path.resolve(__dirname, "build")
}
}
这样，webpack将把最终生成包放在build中，而不是dist.(为了简单起见，在本文中，我们使用默认配置)。
打包 HTML
没有HTML页面的Web应用程序几乎没有用。要在webpack中使用 HTML，我们需要安装一个插件html-webpack-plugin：
npm i html-webpack-plugin --save-dev
一旦插件安装好，我们就可以对其进行配置:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})
]
};
这里的意思是让 webpack，从 src/index.html 加载 HTML 模板。
html-webpack-plugin的最终目标有两个：
加载 html 文件
它将
bundle注入到同一个文件中
接着，我们需要在 src/index.html 中创建一个简单的 HTML 文件：
"en">
"UTF-8">
Webpack tutorial