webpack 第二部分：配置

在使用 webpack 进行开发时，我们需要对 webpack 的配置文件进行一定的设置，以便能够正确地打包我们的项目代码。webpack 的配置文件通常是一个名为 webpack.config.js 的文件，该文件需要导出一个对象，其中包含了 webpack 的各种配置选项。

入口文件配置

在 webpack 中，入口文件是指 webpack 从哪个文件开始构建依赖关系。我们可以在配置文件中通过 entry 字段来指定入口文件的路径。例如：

module.exports = {
  entry: './src/index.js'
};

上面的配置指定了入口文件为 src/index.js。

输出配置

输出配置用于指定 webpack 打包后的文件输出路径和文件名。我们可以通过 output 字段来配置输出选项。例如：

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

上面的配置指定了输出路径为 dist 目录下的 bundle.js 文件。

模块解析配置

模块解析配置用于告诉 webpack 如何解析模块的导入路径。我们可以通过 resolve 字段来配置模块解析选项。例如：

// www.javascriptcn.com code example
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

上面的配置指定了模块的扩展名为 .js 和 .jsx，并且设置了别名 @ 指向 src 目录。

加载器配置

加载器配置用于告诉 webpack 如何处理不同类型的文件。我们可以通过 module.rules 字段来配置加载器选项。例如：

// www.javascriptcn.com code example
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
    ]
  }
};

上面的配置指定了对 .css 文件的处理方式，使用了 style-loader 和 css-loader。

以上是 webpack 配置的一些常用选项，通过合理配置 webpack 的配置文件，我们可以更好地构建我们的项目。