点赞再看，养成习惯，微信搜索【大迁世界】第一时间阅读。
我们应该学习 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.jsWebpack 用 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 文件：
????
????Webpack?tutorial