在 webpack 中同时输出压缩和未压缩文件的不二之选

webpack 简介

webpack 是一个现代化的 JavaScript 构建工具，可以将多个模块打包成一个或多个输出文件。它可以加载多种资源文件，包括 JavaScript、CSS、图像和字体等，并能够处理各种预处理器，如 Babel、TypeScript 和 Sass 等。

webpack 配置

在 webpack 中，我们可以通过配置来实现同时输出压缩和未压缩文件。

开发环境

在开发环境中，我们通常需要使用未压缩的文件，以便于调试和查看源代码。我们可以通过以下配置来实现：

module.exports = {
  mode: "development",
  optimization: {
    minimize: false,
  },
};

生产环境

在生产环境中，我们通常需要使用压缩的文件，以减少文件体积，提高加载速度。我们可以通过以下配置来实现：

module.exports = {
  mode: "production",
  optimization: {
    minimize: true,
  },
};

同时输出压缩和未压缩文件

如果我们希望同时输出压缩和未压缩文件，我们可以通过以下配置来实现：

module.exports = {
  mode: "production",
  optimization: {
    minimize: true,
  },
  output: {
    filename: "[name].min.js",
    library: "[name]",
    libraryTarget: "umd",
    umdNamedDefine: true,
  },
};

这样，webpack 就会同时输出压缩文件 [name].min.js 和未压缩文件 [name].js。

使用 sourcemap

sourcemap 是一个映射文件，它可以将压缩后的代码映射到原始的源代码，以便于调试和查看源代码。

要在 webpack 中使用 sourcemap，我们需要在 devtool 属性中指定要生成的 sourcemap 类型。例如，以下配置可以生成一个完整的 sourcemap：

module.exports = {
  devtool: "source-map",
};

生成的 sourcemap 文件通常与压缩后的文件放在同一个目录中，并且名称与压缩后的文件相同，只是扩展名不同。例如，如果压缩后的文件是 [name].min.js，那么对应的 sourcemap 文件就是 [name].min.js.map。

结论

在本文中，我们介绍了如何在 webpack 中同时输出压缩和未压缩文件，以及如何使用 sourcemap 来便于调试和查看源代码。希望本文对您有所帮助。