【webpack】webpack 配置参数

相关文章

webpack 配置参数

一、入口(entry)

在 Webpack 中，entry 配置项用于指定打包的入口文件，即 Webpack 从哪个文件开始构建依赖图。entry 可以是一个字符串、数组或对象，具体取决于你的项目结构和需求。

单入口（Single Entry）

如果你的项目只有一个入口文件，可以直接将入口文件的路径指定为一个字符串。

1
2
3

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

多入口（Multiple Entries）

如果你的项目有多个入口文件，可以将入口文件的路径指定为一个数组，Webpack 将会构建多个依赖图。

1
2
3

module.exports = {
  entry: ['./src/index1.js', './src/index2.js']
};

对象语法（Object Syntax）

如果你的项目有多个入口文件，并且需要为每个入口文件指定一个名称，可以使用对象语法，键为入口名称，值为入口文件路径。

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

在上述示例中，app 和 admin 是入口名称，对应着不同的入口文件。

动态配置

entry 的配置也可以是一个函数，根据环境动态返回一个对象、数组或字符串。

module.exports = env => {
  if (env.production) {
    return {
      entry: './src/index.js'
    };
  } else {
    return {
      entry: ['./src/index1.js', './src/index2.js']
    };
  }
};

通过上述配置，Webpack 将根据环境动态选择入口文件进行构建。

二、输出(output)

在Webpack中，output配置项用于指定打包后输出文件的相关配置，包括输出文件的路径、文件名、公共路径等。下面是几种常见的output配置方法：

单一输出文件

如果只需要生成一个输出文件，可以直接指定输出文件的路径和文件名。

const path = require('path');

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

在上述配置中，path指定了输出文件的目录，filename指定了输出文件的文件名。

多个输出文件

如果需要生成多个输出文件，可以使用占位符来动态生成文件名。

const path = require('path');

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

在上述配置中，[name]是一个占位符，表示根据入口文件的名称动态生成输出文件的文件名。如果有多个入口文件，每个入口文件将生成一个对应的输出文件。

公共路径

如果需要为静态资源指定一个公共路径，可以使用 publicPath 来配置。

const path = require('path');

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

在上述配置中，publicPath 指定了静态资源的公共路径，例如 CDN 地址或者服务器地址。

Chunk 文件

如果需要将打包后的代码拆分成多个 Chunk 文件，可以使用 chunkFilename 来配置。

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  }
};

在上述配置中，chunkFilename 用于指定生成的 Chunk 文件的文件名。

三、模块(module)

在 Webpack 配置中，module 用于配置如何处理项目中的各种模块。其中最重要的是 rules，它是一个数组，用于配置模块的加载规则和处理方式。rules 中的每一项都是一个对象，用于指定一个模块加载规则，包括匹配条件和对应的 loader 或者解析器。

loader

在Webpack中，loader用于对模块的源代码进行转换，以便能够被Webpack处理。loader可以将各种类型的文件转换为Webpack能够处理的模块，例如将ES6代码转换为ES5、将SCSS文件转换为CSS等。以下是如何配置loader的一般方法：

安装loader

首先，你需要确定需要使用的loader，然后通过npm或yarn进行安装。

1	`npm install --save-dev <loader-name>`

在webpack配置中指定loader

在Webpack配置中，通过module.rules配置项来指定使用的loader。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配需要使用loader转换的文件类型
        exclude: /node_modules/, // 排除不需要处理的文件夹
        use: {
          loader: 'babel-loader', // 指定使用的loader
          options: {
            presets: ['@babel/preset-env'] // 可选：传递给loader的选项
          }
        }
      },
      // 可以配置更多的loader
    ]
  }
};

在上述配置中，我们使用babel-loader来将ES6代码转换为ES5，并使用@babel/preset-env作为预设。

配置多个loader

你可以在module.rules数组中配置多个loader，Webpack会从后往前依次执行这些loader，因此顺序很重要。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 从右往左依次执行
          'css-loader',
          'sass-loader'
        ]
      },
      // 可以配置更多的loader
    ]
  }
};

在上述配置中，首先使用sass-loader将SCSS文件转换为CSS，然后使用css-loader处理CSS文件，最后使用style-loader将CSS注入到HTML中。

loader选项

有些loader支持传递选项，你可以通过options字段来传递这些选项。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 可以配置更多的loader
    ]
  }
};

在上述配置中，我们将Babel的预设@babel/preset-env作为选项传递给了babel-loader。

四、插件(plugin)

在Webpack中，插件（Plugin）用于执行更广泛的任务，例如打包优化、资源管理、环境变量注入等。Webpack的插件系统非常灵活，可以满足各种不同的需求。以下是如何配置插件的一般方法：

安装插件

首先，你需要确定需要使用的插件，并通过npm或yarn进行安装。

1	`npm install --save-dev <plugin-name>`

在webpack配置中引入插件

在Webpack配置文件中，通过require或import引入需要使用的插件。

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

在上述示例中，我们引入了 html-webpack-plugin，它用于生成 HTML 文件，并自动将打包生成的 bundle 文件注入到 HTML 中。

在webpack配置中实例化插件

在Webpack配置文件中，实例化引入的插件，并传入配置选项（如果有的话）。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板文件
      filename: 'index.html' // 指定输出的 HTML 文件名
    })
  ]
};

在上述配置中，我们实例化了 html-webpack-plugin，并指定了模板文件的路径和输出的 HTML 文件名。

配置多个插件

你可以在 plugins 数组中配置多个插件，Webpack会依次执行这些插件。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css'
    })
  ]
};

在上述配置中，我们同时使用了 html-webpack-plugin 和 mini-css-extract-plugin 插件，分别用于生成 HTML 文件和提取 CSS 文件。

五、模式(mode)

Webpack的mode配置项用于指定构建模式，主要有三种模式可选：development、production和none。不同的构建模式会触发不同的Webpack内置优化，以满足不同环境下的需求。以下是每种模式的特点和使用方法：

development（开发模式）

开发模式下，Webpack会启用一些开发工具和优化，例如开发服务器、热模块替换（Hot Module Replacement，HMR）等，以提高开发体验。
生成的输出文件会包含易于调试的源代码映射（source maps），以便在浏览器调试器中准确定位到源代码位置。
不会进行代码压缩和优化，以保持构建速度和调试的便利性。

1
2
3

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

production（生产模式）

在生产模式下，Webpack会启用一系列的优化策略，例如代码压缩、代码分割、模块合并等，以提高生产环境下的性能和效率。
生成的输出文件会被压缩和优化，以减小文件大小并提高加载速度。
会关闭一些开发工具和优化，如开发服务器、热模块替换等，以减少不必要的开销。

1
2
3

module.exports = {
  mode: 'production'
};

none（无模式）

在无模式下，Webpack不会自动应用任何优化或调整，保持原始的构建行为。
这种模式适用于对Webpack构建过程有特殊需求或需要手动配置各种优化选项的情况。

1
2
3

module.exports = {
  mode: 'none'
};

六、上下文(contexte)

在Webpack配置中，context用于设置Webpack的上下文目录，它决定了Webpack应该从哪个目录开始解析入口起点和加载模块。默认情况下，Webpack会将配置文件所在的目录作为上下文目录，但是你可以通过设置context来改变这一行为。以下是context配置的一般用法：

···
module.exports = {
context: __dirname, // 设置上下文目录为配置文件所在的目录
// 其他配置…
};
···

在上述示例中，我们将Webpack的上下文目录设置为配置文件所在的目录，__dirname是Node.js中的一个全局变量，表示当前模块文件所在的目录。

通过设置context，你可以在Webpack配置中使用相对于指定目录的路径，使得配置文件更加灵活和可维护。例如，你可以将所有源代码放在src目录下，并将Webpack的上下文目录设置为该目录，然后在配置中使用相对于src目录的路径来指定入口文件、加载模块等。

module.exports = {
  context: path.resolve(__dirname, 'src'), // 设置上下文目录为 src 目录
  entry: './index.js', // 使用相对于 src 目录的路径
  // 其他配置...
};

通过上述配置，我们可以使用相对于src目录的路径来指定入口文件，而不必再使用绝对路径或相对于配置文件的路径。这样可以使配置更加清晰简洁，并且方便项目的组织和管理。

七、解析(Resolve)

在 Webpack 配置中，resolve 用于配置模块解析的行为，包括模块路径、文件扩展名等。通过 resolve 配置，可以简化模块导入时的路径书写，以及指定 Webpack 解析模块时的搜索规则。以下是一般用法：

const path = require('path');

module.exports = {
  resolve: {
    // 设置模块导入时可以省略的扩展名
    extensions: ['.js', '.jsx', '.json'],
    // 设置模块导入时的别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components')
    }
  },
  // 其他配置...
};

上述示例中的 resolve 配置了两个主要选项：

extensions：指定模块导入时可以省略的扩展名。例如，配置了 extensions: [‘.js’, ‘.jsx’, ‘.json’] 后，当导入模块时可以省略这些文件扩展名，Webpack 会按照指定的顺序依次尝试解析模块。
alias：设置模块导入时的别名。通过设置别名，可以使导入路径更简洁，并且能够减少维护成本。例如，设置了别名 @ 表示项目根目录下的 src 目录，以及 components 表示 src/components 目录，这样就可以在模块导入中使用这些别名来代替实际路径。

八、优化(optimization)

在Webpack中，优化配置(optimization)用于指定打包过程中的优化策略，包括代码分割、模块合并、压缩等。通过优化配置，可以使打包生成的文件更小、加载更快，并且能够提高项目的性能。以下是一般的优化配置示例：

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

module.exports = {
  optimization: {
    minimize: true, // 是否进行代码压缩，默认为 true
    minimizer: [
      new TerserPlugin({
        // TerserPlugin 的配置选项
        terserOptions: {
          // 可以配置 Terser 的压缩选项
        }
      })
    ],
    splitChunks: {
      chunks: 'all', // 代码分割的方式，默认为 'async'
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  // 其他配置...
};

在上述示例中，我们进行了以下几项优化配置：

代码压缩：通过设置 minimize: true，启用代码压缩。同时，我们使用了 TerserPlugin 插件来进行代码压缩，可以根据需要配置相应的压缩选项。
代码分割：通过配置 splitChunks，启用代码分割。我们设置 chunks: ‘all’，表示将所有模块都进行代码分割。在 cacheGroups 中，我们配置了一个名为 vendors 的缓存组，用于将来自 node_modules 目录的模块打包到一个独立的 vendors 文件中。

九、devServer

webpack-dev-server 是一个用于在开发过程中提供开发服务器的工具，它可以实时监听文件变化并自动重新构建，同时提供了热模块替换（Hot Module Replacement，HMR）等功能，使得开发过程更加高效。下面是一个典型的 webpack-dev-server 配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js' // 输出文件名
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 静态文件目录
    compress: true, // 是否启用 gzip 压缩
    port: 8080, // 端口号
    open: true // 是否自动打开浏览器
  }
};

在上述配置中，我们使用了 devServer 配置项来配置 webpack-dev-server：

contentBase：指定静态文件的根目录，通常设置为输出目录，这样 webpack-dev-server 就会将输出目录下的文件作为静态文件提供。
compress：是否启用 gzip 压缩，默认为 false。启用压缩可以减小文件体积，加快传输速度。
port：指定开发服务器监听的端口号，默认为 8080。
open：是否自动打开浏览器，默认为 false。设置为 true 后，当启动开发服务器时，会自动打开默认浏览器并访问项目页面。

除了上述配置外，webpack-dev-server 还提供了许多其他配置选项，例如：

hot：是否启用热模块替换（Hot Module Replacement，HMR），默认为 false。
proxy：设置代理，用于解决跨域请求问题。
historyApiFallback：指定 SPA 应用的路由重定向策略，用于解决路由请求问题。

proxy

在开发过程中，我们可能会遇到跨域请求的问题，特别是前后端分离的项目中，前端运行在一个端口，而后端服务运行在另一个端口。为了解决这个问题，可以使用 webpack-dev-server 的 proxy 配置选项来设置代理，将请求转发到后端服务，从而避免跨域问题。以下是一个典型的 proxy 配置示例：

const path = require('path');

module.exports = {
  // 其他配置...
  devServer: {
    // 其他 devServer 配置...
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        pathRewrite: { '^/api': '' }, // 路径重写，将请求路径中的 /api 替换为空字符串
        changeOrigin: true // 是否改变请求的域名，设置为 true 则将请求的域名改为 target 的域名，默认为 false
      }
    }
  }
};

在上述示例中，我们配置了一个代理规则，将以 /api 开头的请求转发到后端服务地址 http://localhost:3000。同时，我们通过 pathRewrite 选项将请求路径中的 /api 替换为空字符串，这样后端服务能够正确处理请求。另外，我们将 changeOrigin 设置为 true，这样请求的域名将被改为代理目标地址的域名，以确保请求能够正确发送到后端服务。

你可以根据实际情况配置多个代理规则，用于处理不同的接口请求。例如：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    pathRewrite: { '^/api': '' },
    changeOrigin: true
  },
  '/uploads': {
    target: 'http://localhost:3000',
    pathRewrite: { '^/uploads': '/public/uploads' },
    changeOrigin: true
  }
}

historyApiFallback

historyApiFallback 配置项是 webpack-dev-server 中用于指定单页应用 (SPA) 路由请求重定向策略的选项。当使用浏览器路由时，SPA 应用会将所有路由请求指向同一个 HTML 文件，例如 index.html，然后由前端路由来处理具体的页面展示。这就会导致在刷新页面或者直接访问某个路由时，服务器会返回 404 错误，因为对应的页面文件实际上不存在。

为了解决这个问题，historyApiFallback 选项可以指定一个用于重定向请求的路径，当服务器收到路由请求时，会将请求重定向到指定的路径，从而使得 SPA 应用能够正确处理路由请求。以下是一个简单的 historyApiFallback 配置示例：

module.exports = {
  // 其他配置...
  devServer: {
    // 其他 devServer 配置...
    historyApiFallback: true
  }
};

在上述示例中，我们将 historyApiFallback 设置为 true，这样当服务器收到任何路由请求时，都会将请求重定向到根路径，即 index.html。这样就确保了 SPA 应用能够正确处理路由请求。

你也可以指定一个自定义的路径，例如指定为 /app：

module.exports = {
  // 其他配置...
  devServer: {
    // 其他 devServer 配置...
    historyApiFallback: {
      index: '/app'
    }
  }
};

在这个示例中，我们指定了 index 选项为 /app，这样当服务器收到任何路由请求时，都会将请求重定向到 /app 路径，从而使得 SPA 应用能够正确处理路由请求。

十、devtool

devtool 配置选项用于配置源代码映射（source map），以便在调试过程中定位到源代码。源代码映射是一种技术，它将打包后的代码映射回原始的源代码，这样在浏览器的开发者工具中就可以直接看到源代码，从而更容易地进行调试和定位问题。以下是一些常见的 devtool 配置选项：

eval

使用 eval 来生成 source map，每个模块都被包裹在 eval() 函数中，并且每个模块的 source map 被作为 DataUrl 添加到 eval() 的末尾。
这是最快的 source map 选项，但是会影响构建性能，不推荐用于生产环境。

module.exports = {
  // 其他配置...
  devtool: 'eval'
};

产物

1	`eval("console.log('Hello, world!');\n//# sourceURL=webpack:///./src/index.js?");`

source-map

生成一个独立的 source map 文件（.map），并将其与打包后的代码一起输出。
这个选项会显著增加构建时间，但是生成的 source map 最完整，适合生产环境调试。

module.exports = {
  // 其他配置...
  devtool: 'source-map'
};

产物

1
2
3

dist/
  bundle.js
  bundle.js.map

其中，bundle.js.map 文件包含了 source map 数据，可以直接在浏览器的开发者工具中使用，帮助我们定位源代码。由于 source map 被分离出来，因此不会增加打包后文件的体积，但会稍微增加构建时间。

cheap-module-source-map

类似于 source-map，但是不包含列信息，且映射粒度较高，适合开发阶段调试。

module.exports = {
  // 其他配置...
  devtool: 'cheap-module-source-map'
};

产物

1
2
3

dist/
  bundle.js
  bundle.js.map

使用上述配置进行打包后，会生成一个名为 bundle.js.map 的 source map 文件，其中包含了 source map 数据。与 source-map 类似，source map 文件可以直接在浏览器的开发者工具中使用，帮助我们定位源代码。不同之处在于，cheap-module-source-map 生成的 source map 不包含列信息，因此在定位问题时可能会略显不精确，但能够加快构建速度和减小 source map 文件的体积。

inline-source-map

生成一个 DataUrl 形式的 source map，将 source map 包含在打包后的代码中，这样构建出的文件只有一个，方便管理。

module.exports = {
  // 其他配置...
  devtool: 'inline-source-map'
};

产物

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNjcmlwdC9pbmRleC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7O0FBRUE7O0FBRUE7O0FBRUE7O0FBRUE7O0FBRUE7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7QUFFQTtBQUNBO0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBRUE7O0FBRUE7O0FBRUE7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7O0FBRUE7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFFQTtBQUNBOztBQUVBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBRUEifQ==

这样的输出文件中包含了 source map 的 Base64 编码数据，因此在开发者工具中可以直接使用。由于 source map 被包含在打包后的文件中，因此不会生成独立的 source map 文件，也不会增加打包后文件的体积，但会使得文件稍微增大一些。

十一、watch 和 watchOptions

在Webpack中，watch 配置用于启用文件监听模式，使得Webpack可以在文件发生变化时自动重新构建。watchOptions 则用于配置文件监听的选项，例如忽略某些文件、延迟构建等。以下是一个典型的配置示例：

module.exports = {
  // 其他配置...
  watch: true,
  watchOptions: {
    ignored: /node_modules/, // 忽略监听的文件或文件夹
    aggregateTimeout: 300, // 延迟构建时间，单位毫秒
    poll: 1000 // 轮询间隔，单位毫秒
  }
};

在上述示例中：

watch 设置为 true，表示启用文件监听模式。
watchOptions 配置了一些监听选项：
- ignored：设置为一个正则表达式，表示需要忽略监听的文件或文件夹。在这个示例中，我们忽略了 node_modules 文件夹。
- aggregateTimeout：设置延迟构建时间，即在文件变化后多少毫秒内不会立即重新构建，而是等待所有文件变化完成后再重新构建。这里设置为 300 毫秒。
- poll：设置轮询间隔，即每隔多少毫秒检查一次文件变化。在一些特殊情况下，例如在虚拟机或容器中运行时，文件系统可能无法正确触发文件监听事件，此时可以使用轮询来检查文件变化。这里设置为 1000 毫秒。

十二、外部扩展(externals)

在Webpack中，externals 配置用于告诉Webpack不要去打包指定的依赖，而是期望这些依赖在运行时以其他方式提供，比如通过全局变量、CDN引入或者通过外部库加载。这在开发类库或者需要与其他环境进行集成的项目中很有用。

externals 的配置可以是一个字符串、一个对象或者一个函数：

如果是一个字符串，表示需要外部引入的库名称。
如果是一个对象，键表示需要外部引入的库名称，值表示在全局环境中该库对应的变量名称。
如果是一个函数，函数接收三个参数：context、request 和 callback。context 是当前请求的上下文，request 是请求的模块路径，callback 是一个函数，用于告诉Webpack如何处理这个外部依赖。

以下是一个示例配置：

module.exports = {
  // 其他配置...
  externals: {
    lodash: '_', // 表示期望在全局环境中使用名为 "_" 的变量来引入 lodash 库
    react: { 
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React' // 表示期望在全局环境中使用名为 "React" 的变量来引入 react 库
    }
  }
};

在上述示例中，我们配置了两个外部依赖：lodash 和 react。对于 lodash，我们期望在全局环境中使用名为 “_” 的变量来引入 lodash 库；对于 react，我们期望在全局环境中使用名为 “React” 的变量来引入 react 库。

十三、缓存(cache)

Webpack的Cache配置项可以用于指定构建过程中的缓存策略，以提高构建性能。该配置项通常是一个布尔值，可以是 true 或 false，表示是否启用缓存。默认情况下，Webpack会使用内置的缓存插件来缓存构建过程中的中间结果，从而加快二次构建的速度。

module.exports = {
  // 其他配置...
  cache: true
};

在上述示例中，我们将 cache 设置为 true，表示启用缓存。

除了布尔值外，cache 选项也可以是一个缓存插件的实例，用于指定自定义的缓存策略。例如，可以使用 cache-loader 插件来进行缓存：

const CacheLoader = require('cache-loader');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader', // 使用 cache-loader 进行缓存
          'babel-loader'
        ]
      }
    ]
  }
};

在上述示例中，我们在模块加载器中使用了 cache-loader 插件来进行缓存。这样在执行构建时，cache-loader 会缓存每个模块的编译结果，从而加快二次构建的速度。

十四、performance

在Webpack中，performance 配置用于控制构建性能相关的警告和错误信息。通过配置 performance，可以设置一些阈值，当构建过程中的资源超过这些阈值时，Webpack会发出警告或者错误信息，帮助开发者优化构建性能。

performance 配置通常包含以下选项：

hints：设置警告的级别，可选值有 “error”、”warning” 和 false，默认为 “warning”。当资源超过阈值时，如果设置为 “error”，Webpack会抛出一个错误；如果设置为 “warning”，Webpack会发出一个警告；如果设置为 false，Webpack将禁用性能提示。
maxEntrypointSize：设置入口点文件的最大尺寸，单位是字节，默认值为 250000（约为 244KB）。
maxAssetSize：设置单个资源的最大尺寸，单位是字节，默认值为 250000（约为 244KB）。

module.exports = {
  // 其他配置...
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000, // 500KB
    maxAssetSize: 512000 // 500KB
  }
};

在上述示例中，我们配置了 performance，设置警告级别为 “warning”，并将入口点文件和单个资源的最大尺寸都设置为 512000 字节（约为 500KB）。这意味着当入口点文件或单个资源的尺寸超过 500KB 时，Webpack会发出一个警告。

十五、Stats

在Webpack中，stats 配置用于配置打包过程中输出的日志信息。通过配置 stats，可以指定要显示的日志内容，以及日志的格式和颜色等。

stats 配置可以是一个对象，包含了各种日志输出选项，也可以是预定义的字符串，表示一组预设的日志输出选项。以下是一些常见的配置选项：

all：输出所有的日志信息。
errors-only：只输出错误信息。
minimal：只输出最少的日志信息。
none：不输出任何日志信息。
normal：输出默认的日志信息。
verbose：输出详细的日志信息。

除了预定义的字符串外，stats 还可以是一个对象，用于指定更详细的日志输出选项。以下是一个示例配置：

module.exports = {
  // 其他配置...
  stats: {
    // 配置输出的日志级别
    level: 'verbose',
    // 配置是否在控制台输出日志信息
    colors: true,
    // 配置是否显示模块信息
    modules: true,
    // 配置是否显示错误信息
    errors: true,
    // 配置是否显示警告信息
    warnings: true
  }
};

在上述示例中，我们配置了 stats，设置日志级别为 verbose，并指定了一些其他的日志输出选项，包括是否显示颜色、模块信息、错误信息和警告信息等。

十六、Targets

在Webpack中，target 配置用于指定编译的目标环境，即告诉Webpack编译的代码将在哪种环境中运行。这个配置影响了Webpack对代码的编译方式和输出格式。

target 配置的常见取值包括：

‘web’：编译为浏览器环境中可用的代码。默认值。
‘webworker’：编译为Web Worker中可用的代码。
‘node’：编译为Node.js中可用的代码。
‘electron-renderer’：编译为Electron渲染进程中可用的代码。
‘electron-main’：编译为Electron主进程中可用的代码。
‘async-node’：编译为类似Node.js的 process.nextTick、setImmediate 和 queueMicrotask 等异步调度的代码。
这些取值对应不同的目标环境，Webpack会根据目标环境的特性进行相应的代码优化和打包配置。

module.exports = {
  // 其他配置...
  target: 'web'
};

在上述示例中，我们将 target 配置为 ‘web’，表示告诉Webpack编译的代码将在浏览器环境中运行。

喜欢这篇文章？打赏一下支持一下作者吧！

webpack

#webpack

【webpack】webpack 配置参数

https://www.cccccl.com/20221102/webpack/webpack 配置参数/

作者

Jeffrey

发布于

2022年11月2日

许可协议

【webpack】自定义loader 上一篇

【webpack】webpack 配置文件下一篇