webpack 配置(Configuration)

webpack 是一个模块打包工具，通过配置文件来定义项目的构建规则。webpack 的配置文件是一个 JavaScript 文件，其中包含了一些重要的配置项，用来告诉 webpack 如何处理项目中的模块。

基本配置

webpack 的配置文件通常命名为 webpack.config.js，在项目根目录下创建这个文件，并添加以下内容：

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

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

在上面的配置中，我们定义了项目的入口文件为 src/index.js，输出文件为 dist/bundle.js。这是一个最基本的 webpack 配置，用来将项目中的模块打包成一个文件。

模块解析

webpack 支持多种模块解析的方式，可以通过配置 resolve 字段来指定模块的解析规则。例如，我们可以配置如下：

// www.javascriptcn.com code example
module.exports = {
  // 其他配置...
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

在上面的配置中，我们指定了模块的后缀名为 .js 和 .jsx，并且定义了一个别名 @，指向 src 目录。这样在引入模块时，可以直接使用别名 @ 来代替 src 目录的路径。

加载器配置

webpack 支持使用各种加载器来处理不同类型的文件，例如处理 CSS 文件可以使用 css-loader 和 style-loader。我们可以在配置文件中添加如下配置：

// www.javascriptcn.com code example
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

在上面的配置中，我们定义了一个规则，匹配所有以 .css 结尾的文件，并使用 style-loader 和 css-loader 来处理这些文件。

以上是 webpack 配置的一些基本内容，接下来我们将会介绍更多高级的配置项和技巧。