vue-cli脚手架config目录下index.js配置文件的方法

下面是关于VueCLI脚手架中config目录下index.js配置文件的详细讲解攻略：

1. 概述

config目录下的index.js是VueCLI脚手架默认的配置文件，在这个文件中可以对Webpack进行完整的配置，包括入口、出口、加载器、插件等等，以达到自定义配置的目的。值得注意的是，在修改这个文件之前必须对VueCLI有一定的了解。

2. 基本结构

首先我们来看一下index.js的基本结构：

// ...
module.exports = {
  // 基础路径
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/',
  // 输出文件目录
  outputDir: 'dist',
  // 静态资源目录
  assetsDir: 'static',
  // ...
  configureWebpack: {
    // 此处可以配置Webpack的一些详细设置，包括解析、插件等等
  }
}

可以看到，module.exports中包括了VueCLI的一些常用配置项，如outputDir、assetsDir等等，其中最重要的是configureWebpack选项，因为它允许我们完整地控制Webpack的配置。下面我们就来详细讲解一些常用的配置项。

3. 配置项详解

3.1 入口文件

如果我们需要在Webpack中设置多个入口文件，可以在configureWebpack中添加entry选项，如下所示：

module.exports = {
  configureWebpack: {
    entry: {
      app1: './src/main1.js',
      app2: './src/main2.js'
    }
  }
}

这样就会分别以./src/main1.js和./src/main2.js作为入口文件进行打包。

3.2 输出文件

常用的输出文件配置项有outputDir、assetsDir和filename等等，其中，outputDir用于指定打包后文件的输出目录，assetsDir用于指定存放生成的静态资源（如图片、字体等）的目录，filename用于指定打包后的文件名，如下所示：

module.exports = {
  configureWebpack: {
    output: {
      // 输出文件目录
      path: path.resolve(__dirname, './dist'),
      // 输出文件名
      filename: '[name].bundle.js',
      // 静态资源目录
      publicPath: '/assets/'
    }
  }
}

在上面的例子中，输出文件会存放在./dist目录下，文件名为[name].bundle.js，其中[name]会自动替换为入口文件的名称，静态资源文件存放在/assets/目录下。

3.3 加载器

Webpack在进行代码打包时，可以通过加载器（loader）来对不同的文件类型做特定的处理。VueCLI中内置了很多常用依赖的加载器，我们也可以通过在configureWebpack中配置module.rules进行扩展，如下所示：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: { loader: 'worker-loader' }
        },
        {
          test: /\.txt$/,
          use: { loader: 'raw-loader' }
        }
      ]
    }
  }
}

在上面的例子中，我们配置了两个加载器，当Webpack打包的时候，匹配到了以.worker.js结尾的文件，就会使用worker-loader进行加载；匹配到了以.txt结尾的文件，则会使用raw-loader进行加载。

3.4 插件

Webpack的插件可以对打包后的结果进行优化，常用的插件比如HtmlWebpackPlugin、UglifyjsWebpackPlugin、CopyWebpackPlugin等等。我们可以在configureWebpack中进行如下配置：

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  configureWebpack: {
    // 添加插件
    plugins: [
      new HtmlWebpackPlugin({
        // 在打包结束后，自动生成一个HTML文件，并把打包生成的js自动引入到这个HTML文件中
        template: 'public/index.html'
      })
    ]
  }
}

在上面的例子中，我们引入了HtmlWebpackPlugin插件，并在configureWebpack.plugins数组中添加了该插件的实例，实例中将template配置为了public/index.html，这表示在打包结束后会从该模板生成HTML文件。

4. 结语

通过对config/index.js配置文件的详细讲解，我们了解了如何在VueCLI脚手架中配置Webpack。在实际项目开发中，我们可以根据具体需求进行配置，以达到自定义的目的。