Webpack 中文文档 目录

webpack 第二部分:配置

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

入口文件配置

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

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

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

输出配置

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

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

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

模块解析配置

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

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

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

加载器配置

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

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

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

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


上一篇:第二部分
下一篇:webpack 使用不同语言进行配置(Configuration Languages)