这是我参与「第五届青训营」笔记创作活动的第13天

前言

为什么要学习webpack？

提高项目的开发效率：Webpack 可以自动管理你的模块依赖关系，帮助你更方便地管理项目中的资源文件。
增强项目的可维护性：Webpack 可以帮助你把代码分成不同的模块，这有助于提高代码的可维护性。
优化项目的性能：Webpack 可以帮助你对项目中的静态资源进行压缩、合并和优化，从而提高项目的性能。
支持多种前端技术：Webpack 支持多种前端技术，比如说 JavaScript、CSS、Sass、TypeScript 等，这样你就可以使用你熟悉的技术来开发项目。

总之，学习 Webpack 可以帮助你更有效地开发、管理和优化前端项目，提高项目的效率和可维护性。

什么叫webpack工程化？

Webpack 工程化体现在以下几个方面：

资源管理：Webpack 可以管理项目中的各种资源（如 JavaScript、CSS、图片、字体等），并将它们统一打包。
模块化：Webpack 支持 CommonJS 和 ECMAScript 模块化规范，可以帮助你将项目中的代码拆分成多个模块，方便维护和管理。
代码分离：Webpack 可以帮助你将项目中的代码分离成不同的块（如公共代码、第三方库代码、业务代码等），有助于提高项目的性能。
代码优化：Webpack 可以对代码进行压缩、合并、混淆等优化处理，有助于降低代码的体积和提高代码的性能。
自动化：Webpack 可以帮助你自动完成项目的构建、打包、测试、发布等任务，大大提高了项目的开发效率。

1.webpack管理文件

Webpack 可以帮助你管理项目中的文件，包括 JavaScript、CSS、图片、字体等等。当你引入这些文件的时候，Webpack 可以帮助你自动处理它们之间的依赖关系，并且可以对它们进行打包、合并和优化。

下面是一个使用 Webpack 引入文件的例子：

javascript
// 在 JavaScript 中引入 CSS 文件
import './index.css';

// 在 JavaScript 中引入图片
import logo from './logo.png';

// 使用图片
const img = new Image();
img.src = logo;
document.body.appendChild(img);

如果你在 CSS 中引入了图片，Webpack 还可以帮助你自动处理图片的引入：

css
.logo {
  background-image: url('./logo.png');
}

在 Webpack 中，你还可以使用别名来简化文件的引入：

javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

javascript
// 使用别名引入文件
import '@/index.css';
import logo from '@/logo.png';

通过使用 Webpack，你可以方便地管理项目中的文件，避免重复引入和更好地维护项目。

2.webpack核心打包流程

解析入口文件：Webpack 会读取项目中的入口文件，并将其解析为依赖树。
处理模块依赖：Webpack 会递归处理依赖树中的每个模块，并将它们转换为可执行的 JavaScript 代码。
生成代码块：Webpack 会将处理完的模块编译为代码块，代码块可以是单独的文件，也可以是一组相关的文件。
加载器处理：Webpack 会使用加载器处理生成的代码块，加载器可以对代码块进行预处理、编译、转换等操作。
输出文件：最后，Webpack 会将代码块输出到项目的打包目录，并生成对应的资源文件，如 CSS、图片等。

3.webpack使用方法

使用 Webpack 的步骤如下：

安装：使用 npm 安装 Webpack 和 webpack-cli：npm install webpack webpack-cli --save-dev。
配置：在项目根目录下新建一个名为 webpack.config.js 的配置文件。
入口：配置 Webpack 入口文件。
输出：配置 Webpack 输出文件。
模块：配置 Webpack 模块加载器。
插件：配置 Webpack 插件。
运行：运行 Webpack 构建命令：npx webpack。

3.1webpack常见配置

以下是常用的 11 个 Webpack 配置：

entry：入口文件。

entry 配置项用于指定 Webpack 的入口文件，可以是单个文件或多个文件的数组。

代码举例：

java
module.exports = {
  entry: './src/index.js',
};

output：输出文件。

output 配置项用于指定 Webpack 的输出文件，可以是单个文件或多个文件的数组。

代码举例：

lua
module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

module：模块加载器。

module 配置项用于配置 Webpack 的模块加载器，用于处理不同类型的模块。

代码举例：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

plugins：插件。

plugins 配置项用于配置 Webpack 的插件，用于扩展 Webpack 的功能。

代码举例：

javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

devServer：开发服务器。

devServer 配置项用于配置 Webpack 开发服务器，用于提供一个方便的开发环境。

代码举例：

java
module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

mode：构建模式。

mode 配置项用于配置 Webpack 构建的模式，可以是 "development"、"production" 或 "none"。

代码举例：

java
module.exports = {
  mode: 'development',
};

optimization：优化。

optimization 配置项用于配置 Webpack 的优化选项，用于提高构建效率。

代码举例：

java
module.exports = {
  optimization: {
    minimize: true,
  },
};

externals：外部依赖。

externals 配置项用于配置 Webpack 构建时不需要打包的外部依赖。

代码举例：

java
module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

performance：性能。

performance 配置项用于配置 Webpack 的性能选项，用于限制文件的大小。

代码举例：

yaml
module.exports = {
  performance: {
    hints: 'warning',
    maxAssetSize: 1024000,
    maxEntrypointSize: 1024000,
  },
};

resolve 配置：用来配置 Webpack 如何寻找模块所对应的文件。通过设置 extensions 可以指定查找文件的后缀名，例如上面的配置可以支持 .js 和 .jsx 两种文件类型。通过设置 alias 可以给模块定义别名，在代码中引用模块时可以直接使用别名。

java
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

devtool 配置：用来配置 Source Map。Source Map 可以方便地将打包后的代码映射到源代码上，便于调试。通过设置 devtool 为 'inline-source-map' 可以在打包后的文件中内嵌 Source Map，便于调试。

java
module.exports = {
  devtool: 'inline-source-map',
};

补充：

1.tree-shaking 是一种静态分析技术，它可以通过分析代码中的引用关系，去除掉没有使用到的模块。这样可以减小代码体积，提高代码的加载速度。

Webpack 在打包过程中可以支持 tree-shaking，并且对于 ES6 的模块语法，它能够自动检测到没有使用到的模块，并且在打包时去除掉它们。因此，开发者无需额外的操作，只需写出规范的模块代码即可。

要注意的是，tree-shaking 仅能在开发者使用了 ES6 的模块语法时生效，对于其他的模块语法（如 CommonJS）需要额外的配置。

4.理解loader

Loader 是 webpack 中一种重要的概念，它可以让你对各种不同类型的文件，例如图片、字体、样式文件等进行处理。这些文件被称为资源文件，它们不能直接被打包和使用，需要先经过处理才能被正确地引入到代码中。

使用 Loader 可以实现对资源文件的处理，例如转换格式，提取源代码中的图片，编译 SCSS 文件等。 Loader 可以让你按照自己的需求配置处理规则，使你的代码开发和维护更加简单高效。

使用 Loader 的方法非常简单，首先，你需要安装相关的 Loader，然后在 webpack 配置文件中的 module.rules 字段中进行配置。在配置中，你需要指定 Loader 的名称，并且指定处理的文件类型。

以下是一个使用 Loader 转换 SCSS 文件的代码示例：

lua
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

上述代码示例中，我们为 webpack 配置了一个 module.rules 数组，这个数组用于定义对于不同文件类型，使用哪些 loader 进行处理。

每一个配置规则都包含了一个 test 属性，它表示这个规则将会匹配哪些文件；一个 use 属性，它表示对于匹配到的文件，使用哪些 loader 进行处理。

比如：

javascript
{
  test: /.css$/,
  use: ['style-loader', 'css-loader']
}

这个配置规则表示对于所有以 .css 结尾的文件，使用 style-loader 和 css-loader 两个 loader 进行处理。

通过使用不同的 loader，我们可以将不同类型的文件转换为可以在浏览器中使用的代码，比如将 .css 文件转换为 JavaScript 模块。这样，我们可以轻松地处理各种不同类型的文件，并且方便地维护和更新代码。

【青训营】webpack知识体系

前言

1.webpack管理文件

2.webpack核心打包流程

3.webpack使用方法

3.1webpack常见配置

4.理解loader