程序员scholar
  • 构建工具
  • 构建工具
scholar
2024-07-29
目录

Webpack 配置详解

# 1. Mode 模式

概念

mode 选项用于告知 Webpack 使用哪种模式进行打包。不同的模式会启用不同的内置优化。

用法

  • none：不使用任何默认优化选项。

    module.exports = {
  mode: 'none'
};
    1
    2
    3

  • production：生产模式，启用代码压缩和其他优化措施，适用于生产环境。

    module.exports = {
  mode: 'production'
};
    1
    2
    3

  • development：开发模式，启用方便调试的选项，如 source map 和模块热替换，适用于开发环境。

    module.exports = {
  mode: 'development'
};
    1
    2
    3

# 2. Entry 入口

概念

entry 选项指定 Webpack 应该使用哪个模块作为构建其内部依赖图的开始点。默认值是 ./src/index.js。

用法

  • 单个入口（最常见的用法）：

    module.exports = {
  entry: './src/index.js'
};
    1
    2
    3

  • 多个入口，传数组：

    module.exports = {
  entry: ['./src/file1.js', './src/file2.js']
};
    1
    2
    3

  • 对象写法，分别命名打包：

    module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};
    1
    2
    3
    4
    5
    6

# 3. Output 输出

概念

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

用法

  • filename：设置打包后的文件名。对于多个入口点，可以使用占位符（substitutions）来确保每个文件具有唯一的名称。

    module.exports = {
  output: {
    filename: 'bundle.js' // 单个入口点
  }
};
    1
    2
    3
    4
    5

    对于多个入口点：

    module.exports = {
  output: {
    filename: '[name]-[id]-[hash].js' // 使用占位符确保唯一性
  }
};
    1
    2
    3
    4
    5

  • clean：自动清理打包目录（path 指定的目录），只保留当前这次打包的文件。

    module.exports = {
  output: {
    clean: true
  }
};
    1
    2
    3
    4
    5

  • path：指定打包目录，必须要绝对路径。

    const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist')
  }
};
    1
    2
    3
    4
    5
    6
    7

# 4. Loaders 加载器

概念

Loaders 让 Webpack 能够处理其他类型的文件（默认只能处理 JavaScript 文件），并将它们转换为有效的 模块 (opens new window)，以供应用程序使用，并添加到依赖图中。

image-20240729121453596

使用步骤

1. 安装对应的 loader

yarn add css-loader style-loader ts-loader -D
1

2. 配置方式（推荐）

在 webpack.config.js 文件中配置 loader：

module.exports = {
  module: { // 配置模块
    rules: [
      {
        // 匹配所有以 .css 结尾的文件
        test: /\.css$/i,
        // 使用的 loader，先使用 css-loader 解析 CSS 文件，然后使用 style-loader 将 CSS 插入到 DOM 中
        use: ['style-loader', 'css-loader']
      },
      {
        // 匹配所有以 .ts 结尾的文件
        test: /\.ts$/,
        // 使用 ts-loader 处理 02.TypeScript 文件
        use: 'ts-loader'
      },
      {
        // 匹配所有以 .jpg、.png 或 .gif 结尾的文件
        test: /\.(jpg|png|gif)$/i,
        // 使用 asset/resource 类型加载图像资源
        type: 'asset/resource'
      }
    ]
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意

  • css-loader 负责解析 CSS 文件，style-loader 负责将 CSS 插入到 DOM 中。
  • Loader 的执行顺序为 从后向前，因此 use 的数组顺序不能调换。

3. 内联方式

在每个 import 语句中显式指定 loader，使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';
1
  • 使用 ! 前缀，将禁用所有已配置的 normal loader（普通 loader）。
  • 使用 !! 前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）。
  • 使用 -! 前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders。

选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

# 5. Babel 配置

概念

  • 在编写 JavaScript 代码时，经常需要使用一些新的特性，而这些新特性在旧的浏览器中兼容性不好，导致无法使用。
  • Babel 是一个工具，可以将新的 JavaScript 语法转换为旧的 JavaScript，以提高代码的兼容性。
  • 如果希望在 Webpack 中使用 Babel，则需要引入 Babel 的 loader。

使用步骤

1. 安装 Babel 相关依赖

npm install -D babel-loader @babel/core @babel/preset-env
1
  • babel-loader：连接 Webpack 和 Babel 的中间件。
  • @babel/core：Babel 的转换核心。
  • @babel/preset-env：预设环境，用于将现代 JavaScript 语法转换为旧版浏览器兼容的语法。

2. 配置 Babel

在 webpack.config.js 文件中配置 Babel：

// webpack.config.js
module.exports = {
  // 其他配置项...
  module: {
    rules: [
      {
        // 匹配 .js 或 .mjs 文件
        test: /\.m?js$/,
        // 排除 node_modules 和 bower_components 目录
        exclude: /(node_modules|bower_components)/,
        // 使用 babel-loader
        use: {
          loader: 'babel-loader',
          options: {
            // 使用 @babel/preset-env 预设进行转换
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 在 babel.config.js 文件中配置 Babel

除了在 webpack.config.js 中配置 Babel 外，你还可以创建一个独立的 babel.config.js 文件来配置 Babel。

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        esmodules: true,
      },
    }],
  ],
};
1
2
3
4
5
6
7
8
9
10

4. 在 package.json 中设置兼容列表

在 package.json 中添加 browserslist 字段，配置兼容性列表：

"browserslist": [
  "defaults"
]
1
2
3

browserslist 字段用于定义项目需要支持的浏览器范围，这样 Babel 可以根据这些浏览器的支持情况进行相应的转换。

总结

  • 在使用 Babel 时，通常会在 webpack.config.js 文件中配置 Babel loader，以便 Webpack 在打包过程中使用 Babel 对 JavaScript 文件进行转换。
  • 你还可以创建一个独立的 babel.config.js 文件来集中管理 Babel 的配置。
  • 在 package.json 文件中添加 browserslist 字段，用于定义需要支持的浏览器范围，Babel 会根据这些设置进行相应的转换。
  • 在大多数情况下，你需要同时配置 webpack.config.js 和 babel.config.js，以便在打包过程中正确使用 Babel。

Babel配置参考：https://babeljs.io/docs/en/configuration (opens new window)

# 6. Plugins 插件

概念

  • 插件用来为 Webpack 扩展功能。
  • 插件的目的是在 Webpack 处理完成后的某个时刻进行一些额外的操作。
  • Webpack 提供很多开箱即用的 插件 (opens new window)。

常用插件

html-webpack-plugin

  • 这个插件可以在打包代码后，自动在打包目录生成 HTML 页面，并自动引入打包后的 JS 文件。

使用步骤

1. 安装依赖

yarn add -D html-webpack-plugin
1

2. 引入依赖

在 webpack.config.js 文件中引入 html-webpack-plugin：

const HTMLPlugin = require('html-webpack-plugin');
1

3. 配置插件

在 webpack.config.js 文件中配置插件：

plugins: [
  new HTMLPlugin({
    // 设置 HTML 页面的 title
    title: 'Hello Webpack',
    // 指定 HTML 模板文件路径，自动引入打包后的 JS 脚本
    template: './src/index.html'
  })
]
1
2
3
4
5
6
7
8

是的，eval-source-map 也是用于调试源代码的。它在每个模块使用 eval() 包裹，并在 eval 中生成 source map，从而提供较快的构建速度和良好的调试体验，但仅适用于开发环境。

# 7. Devtool 开发工具

概念

devtool 选项用于配置 source map，以便在调试时查看源代码，而不是打包后的代码。source map 是将编译后的代码映射回源代码的一种方式。

image-20240729155524171

image-20240729160347970

# 1. 调试打包后的代码

用法

module.exports = {
  devtool: 'inline-source-map'
};
1
2
3

inline-source-map 将 source map 作为 DataURL 附加到打包后的文件中。这种方式适合开发环境，可以快速定位代码问题。

# 2. 调试源代码（生成单独的 source map 文件）

用法

module.exports = {
  devtool: 'source-map'
};
1
2
3

source-map 生成单独的 source map 文件。这种方式更适合生产环境，可以在调试工具中查看源代码而不是打包后的代码，保留源代码的结构和注释。

# 3. 调试源代码（使用 eval 包裹）

用法

module.exports = {
  devtool: 'eval-source-map'
};
1
2
3

eval-source-map 为每个模块使用 eval() 包裹，并在 eval 中生成 source map。适合开发环境，构建速度更快，但会增加初始加载时间，调试体验较好。不适合生产环境，因为使用 eval 可能带来安全问题。

# 4. 调试时隐藏源代码

用法

module.exports = {
  devtool: 'nosources-source-map'
};
1
2
3

nosources-source-map 生成一个不包含源代码内容的 source map 文件。这样可以在调试时隐藏源代码，但仍然可以查看打包后的代码结构。这种方式适合生产环境，保护源代码。

# 8. webpack-dev-server 开发服务器

概念

webpack-dev-server 提供了一个本地开发服务器，支持模块热替换（HMR）和其他开发便利性功能。

# 1. 安装

yarn add -D webpack-dev-server
1

# 2. 配置开发服务器

在 webpack.config.js 文件中配置开发服务器：

module.exports = {
  devServer: {
    // 配置代理，用于解决跨域请求问题
    proxy:

 {
      '/api1': {
        target: 'http://localhost:5000', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api1': ''}, // 重写路径，利用正则替换请求前缀
        ws: true // 用于支持 websocket
      },
      '/api2': {
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api2': ''} // 重写路径，利用正则替换请求前缀
      }
    },
    // 设置开发服务器的端口号
    port: 3000,
    // 在服务器启动后自动打开浏览器
    open: true
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 3. 启动开发服务器

yarn webpack serve --open
1
  • --open 表示启动服务器后自动打开浏览器。
编辑此页 (opens new window)
上次更新: 2025/01/05, 02:09:04
初识 Webpack
Webpack 打包发布

← Webpack 打包发布→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar