10分钟学会 webpack

webpack 是什么

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序。

前端现在越来越复杂：

• 比如开发过程中我们需要通过模块化的方式来开发；
• 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
• 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
• 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；

这些问题我们可以利用工具来处理，比如为了兼容就使用 Babel 转换 es6，ts 代码就使用 tsc 来转换。然后使用转换好的 js 引入 html 中。css 也一样。但是我们会发现，一个一个处理，这很麻烦，所以我们需要一个构建工具，可以帮助我们自动完成这些东西。webpack 就是一个这样的工具。

基本使用

webpack的官方文档是https://webpack.js.org/
webpack的中文官方文档是https://webpack.docschina.org/

• DOCUMENTATION：文档详情，也是我们最关注的

Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境。

安装

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

webpack 和 webpack-cli

webpack 是核心代码，webpack-cli 是命令行工具，让我们能在命令行中操作 webpack。

webpack 的打包命令就是webpack，当安装了 cli 后，我们就能在命令行中直接输入 webpack 启动打包。
也可以在 package.json 脚本中添加 webpack命令。使用 npm 来启动 webpack 打包。npm 中的脚本命令就相当于是在命令行中输入执行。

webpack-cli 作为一个命令行工具，当然不安装它也行，其实第三方的脚手架就没有使用 webpack-cli，而是使用类似于自己的 vue-service-cli 的东西。

默认打包

我们在命令行输入 webpack 启动打包，这时就有个问题，webpack 打包的是谁？又把谁打包到哪里去？
事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js 作为入口；所以，如果当前项目中没有存在src/index.js文件，那么会报错；打包后会生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件。

这是默认的打包行为，那入口和出口我们能改吗？当然能改。我们可以通过给 webpack 命令添加参数来配置打包行为。

webpack --entry ./src/main.js --output-path ./build

上面命令就重新配置了 webpack 的打包入口和出口。
但是 webpack 的配置很多，全靠命令行来配置是不现实的，所以 webpack 也提供了配置文件webpack.config.jswebpack 启动时会默认读取这个文件进行配置。
当然我们也可以指定要读取的配置文件：

webpack --config wk.config.js

理解 webpack

理解 webpack

webpack.config.js

我们对 webpack 主要配置 8 个方面：

1. mode：构建模式
2. entry：入口
3. output：出口
4. module.rules：模块规则中的 loader
5. plugins：插件
6. devServer：开发服务器
7. resolve：模块解析
8. devtool：source map

本文以使用 webpack 从 0 搭建一个项目的视角来介绍。

const path = require("path")

module.exports = {
   
  mode: "development",
  entry: "./src/index.js",
  output: {
   
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
  module: {
   
    rules: []
  },
  plugins: []
}

入口文件目录

我们之前编写入口文件的规则是这样的：./src/index.js，这个 ./ 指的是哪个目录？是配置文件 webpack.config.js 所在的目录吗？
如果我们的配置文件所在的位置变成了 config 目录，将入口改成 …/src/index.js 会发现是报错的。入口依然要写成 ./src/index.js；

这是因为入口文件其实是和另一个属性时有关的 context；
context 的作用是用于解析入口（entry point）和加载器（loader）：默认表示 webpack 的启动目录。

所以推荐手动将入口目录改成配置文件所在的目录，更符合直觉：

module.exports = {
   
	context: path.resolve(__dirname, "./")
}

loader

使用 loader 的方式有三种

1. 内联方式：在引入的样式前加上使用的loader，并且使用!分割；

import "css-loader!./css/style.css"

2. 命令行方式：–module-bind
3. 配置文件

前面两种方式使用的很少，因为不便于管理，尤其是命令行的方式，webpack5 已经淘汰了。主要还是使用配置的方式。

配置方式

module.rules的配置如下：
rules属性对应的值是一个数组：[Rule]

• 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性来添加模块规则。
  • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
  • use属性：对应的值时一个数组：[UseEntry]
    • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
      • loader：必须有一个 loader属性，对应的值是一个字符串；
      • options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
      • query：目前已经使用options来替代；
    • 传递字符串（如：use: [ ‘style-loader’ ]）是 loader 属性的简写方式（如：use: [ { loader: ‘style-loader’} ]）；
  • loader属性： Rule.use: [ { loader } ] 的简写。

另外 use 是个数组，可以对同一类型的文件使用多个 loader。
loader 的生效顺序是按 use 数组中的顺序，从后往前生效的。

module: {
   
  rules: [
    {
   
      test: "正则",
      use: [