控制 webpack 和 babel 的输出-JavaScript中文网-JavaScript教程资源分享门户

控制 webpack 和 babel 的输出

前端开发中，我们通常需要使用 webpack 和 babel 来做各种工程化的优化和转译。在使用这两个工具的时候，我们往往需要控制输出的格式，以便更好地满足项目的需求。本文将介绍如何控制 webpack 和 babel 的输出，包括转译 ES6、压缩代码、代码分离等。

一、控制 webpack 的输出

转译 ES6

在 webpack 中使用 babel-loader 可以把 ES6 转译成 ES5，使得浏览器可以正常运行。可以在 webpack 的配置文件中添加以下代码来指定要转译的 ES6 文件和转译后的输出目录：

// www.javascriptcn.com code example
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  }
};

压缩代码

在 webpack 中使用 UglifyJSPlugin 可以把代码压缩，减少加载时间，提高网页性能。可以在 webpack 的配置文件中添加以下代码来启用 UglifyJSPlugin：

// www.javascriptcn.com code example
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new UglifyJSPlugin()
  ]
};

代码分离

在 webpack 中使用 SplitChunksPlugin 可以把代码分为多个文件，使得加载速度更快。可以在 webpack 的配置文件中添加以下代码来启用 SplitChunksPlugin：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    main: './index.js',
    vendor: 'lodash'
  },
  output: {
    filename: '[name].bundle.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

以上代码会把 lodash 单独打包成一个文件，使得每次修改代码后只需要加载 main.bundle.js 文件即可。

二、控制 babel 的输出

转译 ES6

在 babel 中使用 preset-env 可以把 ES6 转译成 ES5，使得浏览器可以正常运行。可以在 babel 的配置文件中添加以下代码来指定要转译的 ES6 文件和转译后的输出目录：

// www.javascriptcn.com code example
module.exports = function(api) {
  api.cache(true);

  const presets = [
    [
      "@babel/env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
      },
    ],
  ];

  return {
    presets
  };
}

压缩代码

在 babel 中使用 babel-minify 可以把代码压缩，减少加载时间，提高网页性能。可以在 babel 的配置文件中添加以下代码来启用 babel-minify：

// www.javascriptcn.com code example
const minify = require('babel-minify');

module.exports = function(api) {
  api.cache(true);

  const presets = [
    [
      "@babel/env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
      },
    ],
  ];

  return {
    presets,
    minified: true
  };
}

增加标识符

在 babel 中使用 plugin-transform-runtime 可以为许多需要的语言特性引入辅助函数，但是这个插件会增加一些内部的标识符，可以在 babel 的配置文件中添加以下代码来去除这些标识符：

// www.javascriptcn.com code example
const presets = [
  [
    '@babel/preset-env',
    {
      modules: false,
      useBuiltIns: 'usage',
      corejs: 3
    }
  ]
];

const plugins = ['@babel/plugin-transform-runtime'];

module.exports = { presets, plugins };

// .babelrc

{
   "presets": [...],
   "plugins": ["@babel/plugin-transform-runtime", {"corejs": 3}]
}

以上是如何控制 webpack 和 babel 的输出，值得开发者们参考借鉴。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cd8ff5e46428fe9e726d4c

控制 webpack 和 babel 的输出

接着读