如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。
在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我们的日常需求。
什么是 webpack？
webpack是一个模块绑定器，它对模块有一个更广泛的定义，对于webpack来说，模块是：
- Common JS modules
- AMD modules
- CSS import
- Images url
- ES modules
webpack 的最终目标是将所有这些不同的源和模块类型统一起来，从而将所有内容导入Javascript代码，并最生成可以运行的代码。
entry
这些依赖关系形成一个依赖关系图。
output是生成的Javascript和静态文件的地方。
Loaders
Loaders的目标是在模块中转换文件（Javascript以外的文件）。文件成为模块后，webpack可以将其用作项目中的依赖项。
Plugins
webpack 有两种操作模式：开发(development)和生产(production)。它们之间的主要区别是生产模式自动生成一些优化后的代码。
Code splitting
通过代码拆分，开发人员可以决定仅在响应某些用户交互时加载整个Javascript块，比如单击或路由更改(或其他条件)。
开始使用webpack时，先创建一个新文件夹，然后进入该文件中，初始化一个NPM项目，如下所示：
mkdir webpack-tutorial && cd $_npm init -y要运行 webpack，只需要在 package.json 配置如下命令即可：
"scripts": { "dev": "webpack --mode development" },在开发模式下运行 webpack:
npm run devwebpack 在这里寻找默认入口点src/index.js，所以我们需要手动创建一下，并输入一些内容:
mkdir srcecho 'console.log("Hello webpack!")' > src/index.js这是我们的第一个webpack包，也称为output。
配置 Webpack
Webpack 用 Javascript 编写，并在无头 JS 环境（例如Node.js）上运行。在此文件中，至少需要一个module.exports，这是的 Common JS 导出方式：
module.exports = { //};例如，要更改入口路径，我们可以这样做
const path = require("path");module.exports = { entry: { index: path.resolve(__dirname, "source", "index.js") }};这样，webpack将把最终生成包放在build中，而不是dist.(为了简单起见，在本文中，我们使用默认配置)。
打包 HTML
一旦插件安装好，我们就可以对其进行配置:
const HtmlWebpackPlugin = require("html-webpack-plugin");const path = require("path");module.exports = { plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "index.html") }) ]};html-webpack-plugin的最终目标有两个：
- 加载 html 文件
- 它将bundle注入到同一个文件中
稍后，我们会运行这个程序。
webpack development server
webpack-dev-server 可以让开发更方便，不需要改动了文件就去手动刷新文件。配置完成后，我们可以启动本地服务器来提供文件。
有了 start 命令，我们来跑一下：
npm startLoader是第三方扩展程序，可帮助webpack处理各种文件扩展名。例如，有用于 CSS，图像或 txt 文件的加载程序。
相关配置以module 关键字开始。在module内，我们在rules内配置每个加载程序组或单个加载程序。
test 告诉 webpack “嘿，将此文件名视为一个模块”。use 定义将哪些 loaders 应用于些打包的文件。
打包 CSS
要在 webpack 中测试 CSS，我们需要在 src 下创建一个style.css文件：
h1 { color: orange;}最后，在src/index.js 中加载 CSS：
安装 loader：
npm i css-loader style-loader --save-dev现在，如果你运行npm start，会看到样式表加载在HTML的头部：
在webpack中，Loader 在配置中出现的顺序非常重要。以下配置无效:
//module.exports = { module: { rules: [ { test: /\.css$/, use: ["css-loader", "style-loader"] } ] }, //};相反，以下配置有效：
module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, //};要在 webpack 中测试sass，同样，我们需要在 src 目录下创建一个style.scss 文件：
@import url("https://fonts.googleapis.com/css?family=Karla:weight@400;700&display=swap");$font: "Karla", sans-serif;$primary-color: #3e6f9e;body { font-family: $font; color: $primary-color;}最后，将 sass 文件加载到src/index.js中：
import "./style.scss";console.log("Hello webpack!");安装 loader:
npm i css-loader style-loader sass-loader sass --save-dev注意loader的出现顺序：首先是sass-loader，然后是css-loader，最后是style-loader。
webpack 本身并不知道如何转换Javascript代码。 该任务已外包给babel的第三方 loader，特别是babel-loader。
同样，要使用它，我们需要安装一些 Loader:
- babel-core ：把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理
- babel-preset-env：将现代 JS 编译为ES5
- **babel-loader **：用于 webpack
接着，创建一个新文件babel.config.json配置babel，内容如下：
{ "presets": [ "@babel/preset-env" ]}要测试转换，可以在 src/index.js中编写一些现代语法：
import "./style.scss";console.log("Hello webpack!");const fancyFunc = () => { return [1, 2];};const [a, b] = fancyFunc();没有babel，代码将不会被转译：
\n\nconsole.log(\"Hello webpack!\");\n\nconst fancyFunc = () => {\n return [1, 2];\n};\n\nconst [a, b] = fancyFunc();\n\n\n//# sourceURL=webpack:///./src/index.js?"); webpack 将整个文件视为模块。但是，请不要忘记它的主要目的：加载ES模块。
你可能听说过AMD模块，UMD，或CommonJS，这些没有孰优孰劣。最后，在ECMAscript 2015中，ES 模块出现了。
要在 webpack 使用 ES module ，首先创建 src/common/usersAPI.js文件：
const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";export function getUsers() { return fetch(ENDPOINT) .then(response => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(json => json);}如前所述，webpack有两种操作模式：开发(development )和(production)。到目前为止，我们仅在开发模式下工作。
在生产模式下配 置webpack，请打开 package.json 并添加一个“ build” 命令：
**代码拆分(Code splitting)**是指针对以下方面的优化技术：
- 避免出现一个很大的 bundle
- 避免重复的依赖关系
在 webpack 中有三种激活 code splitting 的主要方法:
- 有多个入口点
- 使用 optimization.splitChunks 选项
- 动态导入
考虑一个使用Moment.js 的 JS 应用程序，Moment.js是流行的时间和日期JS库。
现在清除src/index.js的内容，并引入 moment 库：
import moment from "moment";整个 moment 库都绑定到了 main.js 中这样是不好的。借助optimization.splitChunks，我们可以从主包中移出moment.js。
运行npm run build 并查看运行结果：
main.js 5.05 KiB 0 [emitted] mainvendors~main.js 346 KiB 1 [emitted] [big] vendors~main注意：即使进行代码拆分，moment.js仍然是一个体积较大的库。有更好的选择，如使用luxon或date-fns。
## Code splitting 与 动态导入
这种方法在 Vue 和 React 之类的现代前端库中得到了广泛使用（React有其自己的方式，但是概念是相同的）。
例如，你可以有条件地加载一些 Javascript 模块，以响应用户的交互（例如单击或鼠标移动）。或者，可以在响应路由更改时加载代码的相关部分。
在 src/common/usersAPI.js中：
const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";export function getUsers() { return fetch(ENDPOINT) .then(response => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(json => json);}如果运行npm run start查看并单击界面中的按钮，什么也不会发生。
问题在于ES模块是静态的，这意味着我们无法在运行时更改导入的内容。
这里我们创建一个函数来动态加载模块
const getUserModule = () => import("./common/usersAPI");现在，仅在单击按钮时才加载/common/usersAPI：
通过在导入路径前面加上魔法注释/ * webpackChunkName：“ name_here” * /，可以更改块名称：
const getUserModule = () => import( "./common/usersAPI");const btn = document.getElementById("btn");btn.addEventListener("click", () => { getUserModule().then(({ getUsers }) => { getUsers().then(json => console.log(json)); });});点赞再看，养成习惯，微信搜索【大迁世界】第一时间阅读。
作者：Valentino Gagliardi 译者：前端小智 来源：valentinog 原文：https://www.sitepoint.com/webpack-beginner-guide/
