几种基础的 Webpack 配置模板分享

Webpack 是前端开发中常用的构建工具，用来打包并优化项目代码，使其更高效地运行。但对于初学者而言，Webpack 的复杂性可能会让人望而却步，因此在此分享几种基础的 Webpack 配置模板，旨在帮助大家快速上手 Webpack。

1. 最基础的 Webpack 配置

这是一个最简单的 Webpack 配置文件，仅包含必要的属性。我们可以将其命名为 webpack.config.js：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这个配置中，entry 即为打包入口文件，output 中的 filename 为打包后的文件名称，path 为打包文件存放的路径。

2. 添加 Loader

上述配置仅能处理 JavaScript 文件。要处理其他类型的文件，需要使用 Loader。我们可以通过配置模块规则来使用 Loader。以下是一个添加了 Babel Loader 的 Webpack 配置：

// www.javascriptcn.com code example
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/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

这个配置中，我们添加了 module.rules 属性来定义模块规则，其中，test 用于定义需要使用 Loader 的文件类型，exclude 用于排除不需要使用 Loader 的文件夹，use.loader 则是指定使用的 Loader，这里我们使用了 babel-loader 来转换 ES6 语法。

3. 添加插件

Plugin 是用来扩展 Webpack 功能的工具。以下是一个添加了压缩插件的 Webpack 配置：

// www.javascriptcn.com code example
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

在这个配置中，我们添加了 optimization 属性来定义优化选项，minimize 表示开启压缩，minimizer 用于指定具体的插件，这里我们使用了 terser-webpack-plugin 来压缩代码。

4. 添加多个入口

如果有多个入口文件需要打包，我们可以使用 entry 属性的对象形式进行配置。以下是一个添加了多个入口的 Webpack 配置：

// www.javascriptcn.com code example
const path = require('path');

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

这个配置中，我们将 entry 属性设置为一个对象，并给每个入口文件取了一个名字，即 app 和 home。output.filename 中我们使用了变量 [name]，表示输出的文件名为入口文件名。

通过以上四种基础的 Webpack 配置，你可以快速上手 Webpack，并进行进一步的优化。希望这篇文章对大家有所帮助。

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