Webpack 的基础配置，打开构建世界的第一步

2023-09-27 05:35:30

Webpack 作为一款前端构建工具，可以帮助我们管理、构建和优化我们的 JavaScript 应用程序。它拥有许多强大而灵活的配置项，让我们能够针对不同的应用程序和构建场景进行定制。在本文中，我们将介绍 webpack 的 6 个基础配置项：entry、output、module、plugins、mode 和 devtool，帮助初学者快速上手 webpack。

1. entry 入口配置

entry 入口配置告诉 webpack 从哪里开始构建我们的应用程序。它可以是一个字符串、一个数组或一个函数。字符串或数组形式的入口配置指定了应用程序的入口文件，而函数形式的入口配置允许我们动态地指定入口文件。

// 字符串形式
entry: './src/index.js',

// 数组形式
entry: [
  './src/index.js',
  './src/app.js'
],

// 函数形式
entry: () => {
  // 根据环境变量动态指定入口文件
  if (process.env.NODE_ENV === 'production') {
    return './src/index.prod.js';
  } else {
    return './src/index.dev.js';
  }
}

2. output 输出配置

output 输出配置告诉 webpack 将构建结果输出到哪里。它可以指定输出文件的路径、文件名以及其他一些选项。

output: {
  // 输出路径
  path: path.resolve(__dirname, 'dist'),

  // 输出文件名
  filename: 'bundle.js',

  // 资源路径
  publicPath: '/assets/'
}

3. module 模块配置

module 模块配置告诉 webpack 如何处理应用程序中的模块。它可以指定模块解析规则、加载器和解析器。

module: {
  // 模块解析规则
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

4. plugins 插件配置

plugins 插件配置允许我们向 webpack 中添加插件。插件可以帮助我们执行各种任务，比如优化代码、压缩文件、添加水印等。

plugins: [
  // 压缩代码
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),

  // 添加水印
  new webpack.BannerPlugin({
    banner: 'This file is generated by webpack.'
  })
]