这是我参与[第五届青训营]伴学笔记创作活动的第13天

什么是Webpack

前端由各种资源组成，我们可以手动管理这些资源，但依赖手工这个过程将会非常的繁琐复杂。而webpack本质上是一种前端资源编译、打包的工具。将多份资源文件打包成一个Bundle.

使用Webpack

安装

npm i -D webpack webpack-cli

编译配置文件

执行编译命令

npx webpack

Webpack打包核心流程

入口处理，从entry文件开始，启动编译流程
依赖解析，从entry文件开始，根据require 或者import等语句找到依赖资源
资源解析，根据module配置，调用资源转移器，将png、css等非标准js资源转译为js内容
资源合并打包，将转译后的资源内容合并打包为可直接在浏览器运行的js文件

Entry入口

入口起点(entry point) 指示 webpack 应该使用哪个模块，进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

module.exports = {
  entry: './path/to/my/entry/file.js',
};

Output输出

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

// webpack.config.js:
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    // 输出路径：
    //    --dirname: nodeJs的变量，代表当前文件的绝对路径
    //    resolve: nodeJs里path模块的方法，用来拼接绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'my-first-webpack.bundle.js'
  }
};

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个Node.js 核心模块，用于操作文件路径

Loader解析器

loader让webpack能够去处理哪些非JavaScript文件
loader可以将所有类型的文件转换为webpack能够处理的有效模块

Plugins插件

实际上webpack实现的功能并不全是主包的，可以说主包只是提供了一个平台。真正完成一个项目的资源打包编译的，还是众多的webpack插件：

社区的插件
webpack内置的插件
第三方插件

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。

资源处理

HTML资源

在index.html中是采用手动修改路径，然后才引入的，这样并不方便。我们想要实现的是webpack打包完成后自动帮助我们引入相关的资源。于是就可以使用社区插件中的HtmlWebpackPlugin插件。

1、下载 html-webpack-plugin 插件

pnpm i html-webpack-plugin -D

2、在 webpack.config.js 文件中引入插件并调用

样式资源

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

css文件： style-loader, css-loader；

css-loader：将css文件转换成commonjs模块加载到js中，css代码被转换成了样式字符串。（转换后得到的commonjs模块可以理解为：用js给元素动态添加样式的那种代码）；
style-loader：创建style标签，将css-loader生成的样式资源插入进去，添加到head中，使样式生效。

.less文件： style-loader, css-loader, less-loader；

less-loader：将less文件编译成css文件；
注：要想less-loader生效，还需要下载less (npm install less -D)。

.scss/.sass文件： style-loader, css-loader, sass-loader；

sass-loader：将sass或scss文件编译成css文件；

数据资源

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。

要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

js规范化

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

如何学习webpack

入门：学会灵活应用

理解打包流程
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建完成vue、React、Babel、Sass图片处理等工具的webpack环境
掌握常见脚手架工具的用法，例如vue-cli、create-react-app

进阶：学会扩展Webpack

理解Loader、Plugin机制，能够自行开发webpack组件
理解常见性能优化手段，并能用于解决实际问题
理解前端工程化概念与生态现状

大师：源码级理解Webpack打包编译原理

阅读源码，理解webpack编译，打包原理，甚至能够参与共建

附上一张新手理解webpack知识点的思维导图

Webpack 知识体系 | 青训营笔记