nextjs项目中完整的webpack.config.js

在Next.js中，webpack配置已经被封装在内部，非常适合使用默认配置。如果您需要进行自定义，则可以使用`next.config.js`文件进行配置。下面是一个示例`next.config.js`文件，其中包含一些常见的自定义配置选项：

const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withImages = require('next-images')

module.exports = withImages(withCSS(withSass({
  webpack: (config, { isServer }) => {
    // 在客户端和服务器端共享一些模块
    config.resolve.alias['@components'] = path.join(__dirname, 'components')
    config.resolve.alias['@utils'] = path.join(__dirname, 'utils')
    config.resolve.alias['@services'] = path.join(__dirname, 'services')

    // 处理 LESS 文件
    config.module.rules.push({
      test: /\.less$/,
      use: [
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            sourceMap: true
          }
        },
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            sourceMap: true
          }
        }
      ]
    })

    // 处理 SVG 文件
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    })

    // 处理 ESLint
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        emitWarning: isServer ? false : true
      }
    })

    return config
  }
}))))

这个例子展示了如何使用Next.js提供的自定义配置选项来添加一些常见的功能，例如处理LESS文件、SVG文件、共享模块别名和ESLint。需要安装`@zeit/next-sass`、`@zeit/next-css`和`next-images`依赖。