webpack配置解析

Webpack 的配置文件一般是一个 webpack.config.js 文件。这个文件可以导出一个 JavaScript 对象，其中包含多个配置项来定义 Webpack 的行为。本篇记录一下常见的配置项和它们的作用：

一、entry

入口点：Webpack 会从这个文件开始分析你的应用程序的依赖关系。可以是一个路径，也可以是一个对象（多入口点的情况）。

 entry: './src/index.js',  // 单个入口
  // 或者
  entry: {
    main: './src/index.js',  // 主要入口
    vendor: './src/vendor.js'  // 额外入口
  }

二、output

定义打包后文件的输出位置和名称。

output: {
    path: __dirname + '/dist',  // 输出文件存放的目录
    filename: '[name].bundle.js'  // 输出文件的名称，`[name]` 为 entry 中的键
}

三、loaders

Loaders 用于转换非 JavaScript 文件（如 CSS、图片、TypeScript 等）。它们通过规则（module.rules）指定如何处理特定类型的文件。

配置示例

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.(jpg|jpeg|png|gif|webp)$/i, // 处理图片格式
            use: [
                {
                    loader: 'file-loader', // 使用 file-loader 处理图片
                    options: {
                        name: '[path][name].[ext]', // 可以设置输出的文件路径和文件名
                    },
                },
            ],
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                },
            },
        },
    ],
},

在 webpack.config.js 中，通过 module.rules 配置来指定哪些文件需要通过哪个 loader 来处理。每个规则（rule）通常包括以下字段：

• test：一个正则表达式，用来匹配需要处理的文件类型。

• use：指定使用哪个 loader，或者一个 loader 数组。

• exclude ：一个正则表达式，表示不处理哪些文件（通常用于排除 node_modules 文件夹）。

• include ：与 exclude 相反，表示只处理哪些文件，常用于指定文件夹或文件路径。

常见的 Loaders 配置项

1. Babel Loader（用于转译 JavaScript）

Babel 是一个非常流行的 JavaScript 编译器，用于将现代 JavaScript 代码转化为兼容较旧浏览器的代码。你可以通过 babel-loader 来处理 JavaScript 文件。

安装 Babel 相关依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env

Babel 配置：

module: {
  rules: [
    {
      test: /\.js$/,  // 匹配所有 JavaScript 文件
      exclude: /node_modules/,  // 排除 node_modules 文件夹
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']  // 使用预设配置，转译为兼容目标浏览器的代码
        }
      }
    }
  ]
}

2. CSS Loader 和 Style Loader（用于处理 CSS）

• css-loader：用于解析和处理 CSS 文件中的 @import 和 url() 等语法，返回一个 JavaScript 对象。

• style-loader：将 CSS 插入到页面的 <style> 标签中。

安装相关依赖：

npm install --save-dev css-loader style-loader

CSS 配置：

module: {
  rules: [
    {
      test: /\.css$/,  // 匹配所有 CSS 文件
      use: ['style-loader', 'css-loader']  // 使用 style-loader 和 css-loader
    }
  ]
}

3. SASS/SCSS Loader（用于处理 SASS 或 SCSS）

• sass-loader：将 SASS 或 SCSS 转换为 CSS。

安装相关依赖：

npm install --save-dev sass-loader node-sass 

SASS/SCSS 配置：

module: {
  rules: [
    {
      test: /\.scss$/,  // 匹配所有 SCSS 文件
      use: [
        'style-loader',  // 将 CSS 插入到页面的 <style> 标签中
        'css-loader',    // 解析 CSS 文件
        'sass-loader'    // 将 SCSS 编译成 CSS
      ]
    }
  ]
}

4. File Loader 和 Url Loader（用于处理图片和文件）

• file-loader：将文件打包成独立的文件，返回文件的路径。

• url-loader：与 file-loader 类似，但当文件小于指定的限制时，文件内容会被转为 base64 格式的字符串内联到 JavaScript 中，减少 HTTP 请求。

安装相关依赖：

npm install --save-dev file-loader url-loader

图片文件配置：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/,  // 匹配图片文件
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,  // 文件小于 8KB 时转为 base64 格式
            name: 'images/[name].[hash:8].[ext]'  // 输出路径和文件名
          }
        }
      ]
    }
  ]
}

5. HTML Loader（用于处理 HTML 文件）

html-loader 将 HTML 文件中的图片等静态资源转为 URL 并将其嵌入到打包后的 JavaScript 中。

安装相关依赖：

npm install --save-dev html-loader

HTML 配置：

module: {
  rules: [
    {
      test: /\.html$/,  // 匹配 HTML 文件
      use: 'html-loader'  // 使用 html-loader
    }
  ]
}

6. Vue Loader（用于处理 Vue 单文件组件）

vue-loader 允许你在 Webpack 中使用 Vue 单文件组件（.vue 文件）。

安装相关依赖：

npm install --save-dev vue-loader vue-template-compiler

Vue 配置：

module: {
  rules: [
    {
      test: /\.vue$/,  // 匹配 .vue 文件
      use: 'vue-loader'  // 使用 vue-loader
    }
  ]
}

Loader 使用顺序

Webpack 会按照从右到左或从下到上的顺序处理 use 数组中的 loader。即：

1. 从右到左 ：use: ['babel-loader', 'ts-loader'] 会先用 ts-loader 处理 TypeScript，然后用 babel-loader 转译成 JavaScript。

2. 从下到上 ：use: ['style-loader', 'css-loader'] 会先使用 css-loader 解析 CSS 文件，再用 style-loader 将其插入到 HTML 中。

四、plugins

插件可以扩展 Webpack 的功能，常用于优化构建过程、管理 HTML 文件、压缩代码等。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'  // 使用模板生成 HTML 文件
    })
  ]
};

五、resolve

配置模块解析规则，例如如何解析模块路径。

resolve: {
    alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, 'src'), // 将 @ 映射到 src 目录
    },
    extensions: ['*', '.js', '.vue', '.json'],
},

六、devtool

配置生成 Source Maps 的方式，方便调试代码。

module.exports = {
  devtool: 'source-map'  // 生成完整的 source map
};

七、devServer

配置开发服务器，常用于本地开发时启动一个 Web 服务器。

devServer: {
    // contentBase: path.join(__dirname, 'dist'),
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    // 处理 SPA 的路由，防止刷新页面时报 404 错误
    historyApiFallback: true, // 支持 HTML5 History API 路由
    // publicPath: '/',
},

八、mode

Webpack 4 及以上版本支持 mode 配置，用于指定构建模式。可以是 development、production 或 none。

module.exports = {
  mode: 'development'  // 使用开发模式
};

九、optimization

optimization 配置项提供了对构建输出的控制，主要用于优化生成的文件、提高加载性能、减少文件大小等。optimization 让我们可以控制如何对代码进行拆分、压缩、去重等操作，从而优化最终的打包结果。

配置示例

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'  // 对所有模块进行代码拆分
    },
    minimize: true  // 启用压缩
  }
};

配置项详解

1. 代码拆分（Code Splitting）

代码拆分是 Webpack 中优化的一项重要功能，它允许你将代码拆分成多个小的块，从而按需加载，提高性能。

Webpack 通过 splitChunks 配置项来定义如何拆分代码。拆分后的代码块可以按需加载，提高首屏加载速度。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',  // 拆分所有类型的模块（`initial`, `async`, `all`）
      minSize: 20000,  // 最小块大小，单位字节，超过该值时会进行拆分
      maxSize: 0,  // 块最大大小，设置为 0 不做限制
      minChunks: 1,  // 该模块至少出现一次才会被拆分
      maxAsyncRequests: 30,  // 异步加载文件的最大数量
      maxInitialRequests: 30,  // 初始化加载文件的最大数量
      automaticNameDelimiter: '~',  // 自动生成文件名时的分隔符
      name: true,  // 是否自动生成文件名
    }
  }
};

splitChunks 选项详解：

• chunks: 控制拆分哪些类型的模块：

  • 'initial'：拆分初始化加载的模块。

  • 'async'：拆分异步加载的模块（动态 import）。

  • 'all'：拆分所有模块。

• minSize: 拆分出来的文件的最小大小，文件小于该值时不会被拆分。

• maxSize : 生成的块的最大大小。设置为 0 则不限制大小。

• minChunks : 一个模块在拆分时，至少需要被多少个入口文件共享才会被拆分。可以设置为 2，表示只有被多个文件使用的模块才会被拆分。

• maxAsyncRequests 和 maxInitialRequests：限制了异步加载和初始化加载时，最大请求数。如果超过该值，WebPack 会合并部分文件来减少请求数。

• automaticNameDelimiter: 生成文件名时的分隔符。

• name : 是否启用根据 chunks 的名称来自动生成文件名称。

2. 压缩（Minification）

压缩可以减小代码体积，WebPack 提供了内置的压缩插件以及与第三方插件配合使用的方式。

开启压缩功能，默认情况下，Webpack 在生产环境中会自动启用代码压缩。

module.exports = {
  optimization: {
    minimize: true  // 开启压缩
  }
};

TerserPlugin（默认压缩工具）

WebPack 5 默认使用 TerserPlugin 进行 JavaScript 代码压缩。Terser 会通过删除注释、空白符、简化表达式等方式减小文件体积。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,  // 开启压缩
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true  // 去除 console.log
          },
          output: {
            comments: false  // 去掉注释
          }
        }
      })
    ]
  }
};

3. Tree Shaking

Tree Shaking 是 Webpack 的一种优化机制，旨在通过去除未使用的代码来减少打包文件的体积。这是基于 ES6 的模块化（import / export）的静态特性来实现的。

Tree Shaking 是 Webpack 的默认功能，只要你遵循 ES6 模块的语法，Webpack 会自动进行Tree Shaking。

module.exports = {
  mode: 'production',  // Tree shaking 仅在生产环境下启用
  optimization: {
    usedExports: true  // 告诉 Webpack 只保留实际使用的导出
  }
};

Tree Shaking 会去除你代码中未使用的导出，最终减小打包文件的大小。例如，你引入一个大库，但只使用其中的某些方法，Webpack 会去掉不需要的方法，仅打包你使用的部分，从而减小文件体积。

4. optimize-css-assets-webpack-plugin 和 css-minimizer-webpack-plugin

在生产环境中，你还可以使用 css-minimizer-webpack-plugin 或 optimize-css-assets-webpack-plugin 来压缩 CSS 文件。

npm install --save-dev css-minimizer-webpack-plugin

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()  // 使用 css-minimizer-webpack-plugin 压缩 CSS
    ]
  }
};

CSS 文件会被压缩，去除不必要的空白符、注释和重复的 CSS 规则，减小 CSS 文件体积。