Babel7 配合 webpack 优化方法总结

在前端开发中，Babel 和 webpack 是两个非常重要的工具。Babel 能够将 ES6/7/8 的语法转换成浏览器可以识别的 ES5 代码，而 webpack 则能够将多个模块打包成一个文件并优化其中的资源。本篇文章将为大家介绍如何使用 Babel7 配合 webpack 进行前端代码的优化。

Babel7 与 webpack 的基础配置

在使用 Babel7 和 webpack 时，我们需要对它们进行基础的配置操作，下面是基础配置的示例代码：

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: 3
      }
    ]
  ],
  plugins: ["@babel/plugin-transform-runtime"]
};

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

这里的 Babel7 配置文件是 babel.config.js，使用了 @babel/preset-env 以及 @babel/plugin-transform-runtime，其中 useBuiltIns: "usage" 表示使用 Babel7 内置的 polyfill，并设置了 core-js 3 版本。webpack 配置文件是 webpack.config.js，指定了入口文件为 index.js，打包后的文件名为 bundle.js，同时将输出文件放入到 dist 目录下。在模块加载时使用 babel-loader 进行转换处理。

Babel7 与 webpack 的优化配置

除了基础配置外，我们还可以根据具体需求来对 Babel7 和 webpack 进行优化，下面是优化配置的示例代码：

Babel7 的优化

// babel.config.js
module.exports = api => {
  const isProduction = api.env("production");

  return {
    presets: [
      [
        "@babel/preset-env",
        {
          useBuiltIns: "usage",
          corejs: 3
        }
      ]
    ],
    plugins: [
      "@babel/plugin-transform-runtime",
      isProduction && "babel-plugin-transform-react-remove-prop-types"
    ].filter(Boolean),
    comments: !isProduction
  };
};

这里的 Babel7 配置文件同样是 babel.config.js，不同的是这次我们使用了 babel-preset-env 的第二个参数 —— targets 来限制 Babel7 转换的目标浏览器版本，这样可以提升代码转换的速度和效率。同时，我们还根据 isProduction 值来决定是否移除 React 中的 PropTypes，以及是否去除注释。

webpack 的优化

// webpack.config.js
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  mode: isProduction ? "production" : "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  optimization: {
    minimize: isProduction,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

这里的 webpack 配置文件同样是 webpack.config.js，不同的是这次我们使用了 mode 属性来设置打包的模式，当为 production 时会启用一些默认的优化配置，可以减小打包后的文件大小。同时，我们还使用了 optimization 属性来配置代码压缩的工具，这里我们使用了 TerserPlugin 和 CssMinimizerPlugin 两个插件。

总结

通过优化 Babel7 和 webpack 的配置，我们可以提升前端代码的性能和效率，同时减小打包后的文件大小，让用户更快地加载页面，提高用户体验。当然，以上只是部分优化方法，如果有更好的方式，欢迎大家补充。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65914917eb4cecbf2d67cdbc