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 字段来配置模块解析选项。例如：

-- -------------------- ---- -------
-------------- - -
  ------ -----------------
  ------- -
    ----- ----------------------- --------
    --------- -----------
  --
  -------- -
    ----------- ------- --------
    ------ -
      ---- ----------------------- ------
    -
  -
--

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

加载器配置

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

-- -------------------- ---- -------
-------------- - -
  ------ -----------------
  ------- -
    ----- ----------------------- --------
    --------- -----------
  --
  ------- -
    ------ -
    -
      ----- ---------
      ---- ---------------- -------------
    -
    -
  -
--

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

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