Nuxt.js 如何配置 build？

推荐答案

在 Nuxt.js 中，build 配置是通过 nuxt.config.js 文件中的 build 属性来定义的。以下是一个典型的 build 配置示例：

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

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

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

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

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

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

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

本题详细解读

1. build 配置的作用

build 配置用于自定义 Nuxt.js 的构建过程，主要涉及 Webpack 的配置。通过 build 配置，你可以优化构建性能、添加自定义 Webpack 插件、配置 Babel 和 PostCSS 等。

2. 常用配置项

• loaders: 用于配置 Webpack 的 loaders。例如，可以配置 Vue 的编译器选项。

• babel: 用于配置 Babel 的 presets 和 plugins。你可以在这里添加或修改 Babel 的配置。

• postcss: 用于配置 PostCSS 的插件。你可以在这里添加或修改 PostCSS 的配置。

• extend: 用于扩展 Webpack 的配置。你可以在这里添加自定义的 Webpack 规则或插件。

• optimization: 用于配置 Webpack 的优化选项。例如，可以配置代码分割（splitChunks）。

• plugins: 用于添加自定义的 Webpack 插件。

• devtool: 用于配置 Webpack 的 devtool 选项，控制 source map 的生成。

3. 配置示例解析

• loaders: 配置了 Vue 的编译器选项，将空白字符压缩。

• babel: 配置了 Babel 的 presets 和 plugins，启用了 @babel/preset-env 和 @babel/plugin-transform-runtime。

• postcss: 配置了 PostCSS 的插件，启用了 postcss-import、postcss-nested 和 cssnano。

• extend: 在开发环境下，为客户端代码添加了 ESLint 的 pre-loader。

• optimization: 配置了代码分割，将 node_modules 中的代码单独打包。

• plugins: 添加了一个自定义的 Webpack 插件 MyCustomWebpackPlugin。

• devtool: 在开发环境下使用 eval-source-map，在生产环境下使用 source-map。

通过这些配置，你可以灵活地控制 Nuxt.js 的构建过程，满足不同的项目需求。