Nuxt.js 如何配置 build？

推荐答案

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

// www.javascriptcn.com code example
export default {
  build: {
    // 配置 Webpack 的 loaders
    loaders: {
      vue: {
        compilerOptions: {
          whitespace: 'condense'
        }
      }
    },

    // 配置 Babel
    babel: {
      presets: ['@babel/preset-env'],
      plugins: [
        ['@babel/plugin-transform-runtime', { regenerator: true }]
      ]
    },

    // 配置 PostCSS
    postcss: {
      plugins: {
        'postcss-import': {},
        'postcss-nested': {},
        'cssnano': {}
      }
    },

    // 配置 Webpack 的扩展
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        });
      }
    },

    // 配置 Webpack 的优化选项
    optimization: {
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          }
        }
      }
    },

    // 配置 Webpack 的插件
    plugins: [
      new MyCustomWebpackPlugin()
    ],

    // 配置 Webpack 的 devtool
    devtool: isDev ? 'eval-source-map' : 'source-map'
  }
}

本题详细解读

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 的构建过程，满足不同的项目需求。