在 webpack 中配置 babel，压缩 js/css 文件 - webpack 之道

2023-09-12 23:03:22

在前面的文章中，我们已经讨论了如何使用 webpack 处理 CSS 文件并提取出单独的文件，以及如何处理图片。现在，我们来讨论一下如何在 webpack 中配置 babel，以及如何通过 webpack 进行 js/css 文件的压缩。

配置 babel

babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转换成浏览器可以理解的代码。在 webpack 中，我们可以通过配置 babel-loader 来使用 babel。

首先，需要安装 babel-loader 和 @babel/core：

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

然后，在 webpack 配置文件中添加 babel-loader：

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

在上面的配置中，我们使用 @babel/preset-env 来将现代 JavaScript 代码转换成浏览器可以理解的代码。

压缩 js/css 文件

webpack 提供了多种方式来压缩 js/css 文件。我们可以使用 webpack 内置的 UglifyJsPlugin 和 OptimizeCssAssetsPlugin 来压缩 js/css 文件。

首先，需要安装 UglifyJsPlugin 和 OptimizeCssAssetsPlugin：

npm install --save-dev uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin

然后，在 webpack 配置文件中添加 UglifyJsPlugin 和 OptimizeCssAssetsPlugin：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // 省略其他配置
    ]
  },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true
        }
      }
    }),
    new OptimizeCssAssetsPlugin({})
  ]
};