详解vue-cli 2.0配置文件(小结)

下面来详细讲解“详解vue-cli 2.0配置文件(小结)”的完整攻略。

什么是vue-cli 2.0配置文件

vue-cli是Vue.js官方提供的一个基于Webpack构建工具的脚手架，用于快速搭建Vue.js项目的基础架构。在Vue.js 2.0版本之前，vue-cli默认使用的是基于Webpack1.x版本的构建工具，因此配置文件也是基于这个版本进行编写的。

配置文件在vue-cli2.0中的位置

在vue-cli2.0中，配置文件默认位于项目的根目录下，文件名为"webpack.config.js"。如果您想自定义配置文件的位置和文件名，可以在项目根目录下创建一个名为"config"的文件夹，并在该文件夹下创建一个名为"index.js"的文件，该文件即为自定义的配置文件。

下面以webpack.config.js为示例，介绍该文件的基本结构和常用配置项。

配置文件基本结构

配置文件主要由两个部分构成，分别为"module.exports"和"webpack配置项"。

"module.exports"是Node.js提供的一种导出机制，用于将某个变量或对象导出为一个模块，以便其他模块可以使用该模块。在vue-cli2.0中，我们可以利用"module.exports"将webpack的配置项导出为一个模块，以便webpack能够读取并加载该模块。

示例代码：

module.exports = {
  // webpack 配置项
  // ...
}

webpack配置项则是我们可以自定义的一些选项，用来配置webpack在构建过程中的行为和功能。下面我们将详细介绍常用的webpack配置项。

常用的webpack配置项

entry

entry是webpack的入口配置，用来指定webpack应该从哪个文件开始构建应用程序。

示例代码：

module.exports = {
  entry: './src/main.js'
}

该配置项将告诉webpack从"./src/main.js"文件开始构建应用程序。

output

output是webpack的输出配置，用来指定webpack应该把构建好的应用程序输出到哪个目录下，并生成什么样的文件名称。

示例代码：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

该配置项将告诉webpack将构建好的应用程序输出到"./dist"目录下，并把输出文件的名称设置为"bundle.js"。

resolve

resolve是webpack的解析配置，用来告诉webpack在解析模块路径时应该怎么做。

示例代码：

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'components': path.resolve(__dirname, 'src/components')
    },
    extensions: ['.js', '.vue', '.json']
  }
}

该配置项中的"alias"用于配置模块的别名，"extensions"用于配置可以省略的后缀名。

module

module是webpack的模块配置，用于配置webpack在处理各种不同类型的模块时应该怎么做。

示例代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: 'vue-style-loader!css-loader',
            scss: 'vue-style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

该配置项中的"rules"用于配置模块处理规则，每个规则都由一个"test"、"loader"和"options"三个部分组成。

plugins

plugins是webpack的插件配置，用于配置webpack在构建过程中应该怎么做。

示例代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    }),
    new UglifyJsPlugin()
  ]
}

该配置项中的"plugins"用于配置webpack要使用的插件，每个插件都是一个JavaScript对象，按照顺序进行执行。