vue-cli脚手架-bulid下的配置文件

当使用 Vue.js 开发项目时，经常会使用到 Vue CLI 脚手架工具来初始化项目，并在 build 时自动生成配置文件来进行编译、打包等操作。以下是 Vue CLI 脚手架中 bulid 下的配置文件的详细解析：

1. 配置文件的作用

Vue CLI 脚手架的 build 目录下存放的是一些 webpack 的配置文件，这些配置文件主要用于在生产环境下对代码进行打包、压缩、混淆等处理。这些处理使得项目可以在生产环境下得到更好的性能表现。该目录包含以下配置文件：

webpack.base.conf.js： webpack 基础配置文件，主要定义通用配置；
webpack.prod.conf.js： webpack 生产环境配置文件，主要定义生产环境下的打包配置。

2. webpack.base.conf.js

webpack.base.conf.js 是 Vue CLI 脚手架代码打包的基础配置文件，该文件主要定义了项目在开发和打包时通用的配置信息，包括 entry 入口、output 输出、loader 加载器、plugin 插件等。以下是该文件的主要配置项：

2.1 entry

entry 是指项目的入口文件，也就是代码执行的起点。该配置项主要指定了 webpack 如何查找项目中的入口文件，可以是单个文件，也可以是多个文件。示例：

entry: {
   app: './src/main.js'
}

以上代码将项目的入口文件指定为 ./src/main.js。

2.2 output

output 是指项目的输出配置，包括输出文件名称、文件夹路径、资源文件公共路径等。主要用于指定打包后的代码输出方式、位置等信息。示例：

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}

以上代码指定 webpack 打包后的输出路径，其中文件名称包含 chunkhash 等信息。

2.3 module

module 配置项用于定义各种文件类型的处理方式，包括图片、CSS、JS 等文件。通过指定不同的 Loader 进行不同类型的文件加载和解析。示例：

module: {
  rules: [
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        formatter: require('eslint-friendly-formatter')
      }
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test')]
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(scss|sass)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

以上代码指定了 JS、vue、图片、字体、Sass 文件等的加载方式及配置。

2.4 resolve

resolve 和 module 配置项作用相似，也用于配置 webpack 如何处理模块，是一种配置优化方式。resolve 包含 alias、extensions 等属性，需要通过配置找到正确的文件路径。示例：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
}

以上代码将 vue 模块指向 vue.esm.js 文件，@ 符号代表根目录的 src 目录。

3. webpack.prod.conf.js

webpack.prod.conf.js 是 Vue CLI 脚手架在生产环境下的打包配置文件，包含了 webpack.base.conf.js 中的所有配置信息，同时还具有一些针对生产环境的特殊配置项。以下是该文件的主要配置项：

3.1 entry

entry 配置项与 webpack.base.conf.js 配置项一样，用于定义项目的入口文件。

3.2 output

output 配置项与 webpack.base.conf.js 配置项一样，用于定义项目的输出路径及格式。

3.3 module

module 配置项与 webpack.base.conf.js 配置项一样，用于配置项目中各种文件的处理方式。

3.4 plugins

plugins 是指 webpack 的插件，可用于执行更多的任务，例如压缩、混淆、文件复制等操作。以下是常用的插件：

HtmlWebpackPlugin：用于自动生成 index.html 文件，可设置模板文件及加载 CSS、JS 等文件；
MiniCssExtractPlugin：用于提取 CSS 代码到外部样式文件中；
OptimizeCSSPlugin：用于压缩、合并 CSS 文件；
UglifyJsPlugin：用于压缩 JS 代码。

示例：

plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
    'process.env': require('../config/prod.env')
  }),
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
  }),
  // extract css into its own file
  new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    // Setting the following option to `true` would enable css source maps.
    // This is useful for inspecting errors, but incurs significant performance penalty.
    // In the production build, we actually omit css source maps because you don't need them
    // generate source map for css
    options: {
      sourceMap: config.build.productionSourceMap,
      hmr: process.env.NODE_ENV === 'development'
    }
  }),
  // Compress extracted CSS. We are using this plugin so that possible
  // duplicated CSS from different components can be deduped.
  new OptimizeCSSPlugin({
    cssProcessorOptions: config.build.productionSourceMap
      ? { safe: true, map: { inline: false } }
      : { safe: true }
  }),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /index.html
  // see https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: './index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
  }),
  // keep module.id stable when vendor modules does not change
  new webpack.HashedModuleIdsPlugin(),
  // enable scope hoisting
  new webpack.optimize.ModuleConcatenationPlugin(),
  // split vendor js into its own file
  new webpack.optimize.SplitChunksPlugin({
    name: 'vendor',
    minChunks: function (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules')
        ) === 0
      )
    }
  }),
  ...
]

以上是对 webpack.prod.conf.js 文件主要配置项的详细介绍。

结语

对于一个 Vue CLI 脚手架项目来说，bulid 目录下的配置文件是非常重要的。通过逐个配置 webpack 的相关选项，可以使得我们的项目在生产环境下得到更好的性能表现。如果你想要更加深入地理解 webpack 配置文件的更多内容，可以查看官方文档或相关的书籍和教程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli脚手架-bulid下的配置文件 - Python技术站