vue-cli的webpack模板项目配置文件分析

下面是“vue-cli的webpack模板项目配置文件分析”的完整攻略：

一、什么是vue-cli的webpack模板项目配置文件？

vue-cli是官方提供的Vue.js项目脚手架，通过vue-cli可以快速创建一个基于Vue.js的项目脚手架，而webpack是一种模块化管理工具，可以将多个JavaScript文件打包到一个文件，以便于浏览器加载和解析。vue-cli的webpack模板项目配置文件则是将Vue.js和webpack相结合的配置文件，它可以对项目进行打包、优化等操作。

在vue-cli的webpack模板项目中，配置文件通常分为两种：webpack.base.conf.js和webpack.prod.conf.js。webpack.base.conf.js是webpack的基础配置文件，包含了公共的配置选项，如入口文件、输出路径、模块解析规则等。而webpack.prod.conf.js是webpack的生产环境配置文件，主要包含了针对生产环境的打包、优化等配置。

二、分析vue-cli的webpack模板项目配置文件

1. webpack.base.conf.js

以下是webpack.base.conf.js的代码示例：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            loaders: {
              sass: ExtractTextPlugin.extract({
                use: ['css-loader', 'sass-loader'],
                fallback: 'vue-style-loader'
              })
            }
          }
        },
        {
          test: /\.js$/,
          use: 'babel-loader',
          include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
              }
            },
            {
              loader: 'image-webpack-loader',
              options: {
                bypassOnDebug: true
              }
            }
          ]
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'media/[name].[hash:7].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'fonts/[name].[hash:7].[ext]'
              }
            }
          ]
        }
      ]
    }
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    new ExtractTextPlugin({
      filename: 'css/[name].[contenthash].css'
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: 'static',
        ignore: ['.*']
      }
    ])
  ]
}

entry

entry指定了打包入口文件，这里指定的入口文件为./src/main.js。

output

output指定了打包后文件的输出路径和文件名，这里采用了path.resove方法获得当前目录的上一级目录，然后将输出路径设为../dist，将输出文件名设为[name].js，其中[name]会被替换为entry中的键名。publicPath指定了构建好的静态文件在浏览器中访问时的路径前缀，这里设为根路径/。

resolve

resolve配置了模块解析的规则和别名。extensions指定了在引用模块时可以省略的后缀名，这里可以省略.js、.vue和.json后缀。alias则是自定义的模块别名，方便在应用内部引用模块。这里将vue指定为vue/dist/vue.esm.js，@指定为src目录，assets指定为src/assets目录，components指定为src/components目录。

module

module配置了如何处理模块。rules是一个数组，每一项都是一个规则对象。这里定义了对于打包的处理规则。其中，test指定了哪些文件会被打包，这里分为.vue、.js、图片、媒体、字体文件等不同的类型。use是从右到左执行的加载器，vue-loader对.vue文件进行处理，babel-loader对.js文件进行处理，使其兼容大部分浏览器。url-loader对图片、音视频都进行处理，其中对图片进行了base64编码处理。image-webpack-loader对图片进行压缩和优化。

plugins

plugins是插件数组，通过插件可以扩展webpack的功能。这里定义了多个插件，包括提取公共代码、生成html、复制静态资源等。其中，CommonsChunkPlugin插件用于提取公共代码，将第三方库通过CDN的方式引入，以减少打包后的文件大小，加快应用的首屏加载速度。HtmlWebpackPlugin用于生成HTML文件，并将打包后的JavaScript和CSS文件插入到HTML中。CopyWebpackPlugin则用于复制静态资源，如favicon等。

2. webpack.prod.conf.js

以下是webpack.prod.conf.js的代码示例：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')

const webpackConfig = merge(baseWebpackConfig, {
  devtool: '#cheap-module-eval-source-map',
  module: {
    rules: ExtractTextPlugin.extract({
      use: [{
        loader: 'css-loader',
        options: {
          minimize: true
        }
      }, 'postcss-loader', 'sass-loader'],
      fallback: 'vue-style-loader'
    })
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
     new UglifyJsPlugin({
       uglifyOptions: {
         compress: {
           warnings: false
         }
       },
       sourceMap: false,
       parallel: true
     }),
     new ExtractTextPlugin({
       filename: 'css/[name].[contenthash].css'
     }),
     new OptimizeCSSPlugin({
       cssProcessorOptions: {
         safe: true
       }
     })
  ]
})

module.exports = webpackConfig

devtool

devtool用于指定开发模式下使用的sourcemap类型，这里指定为#cheap-module-eval-source-map。

module

module同样用于定义模块解析的规则，这里的处理规则与webpack.base.conf.js略有不同，通过ExtractTextPlugin提取CSS文件。

plugins

plugins中定义了多个插件，包括定义环境变量、压缩JavaScript代码和CSS样式、提取CSS等。其中，DefinePlugin插件用于定义环境变量，这里定义了NODE_ENV为production。UglifyJsPlugin用于压缩JavaScript代码，这里配置了压缩选项compress，warnings设为false。ExtractTextPlugin插件用于将CSS样式文件抽取成单独的文件，这里文件名中包含了哈希值，防止浏览器缓存。OptimizeCSSPlugin插件用于压缩CSS样式文件。

三、示例说明

1. 如何修改默认入口文件

在开发过程中，可能需要使用多个入口文件。此时只需要在entry中添加需要的入口文件即可：

module.exports = {
  entry: {
    'app': './src/app.js',
    'home': './src/home.js'
  }
  // ...
}

以上代码将会生成两个JavaScript文件：app.js和home.js。

2. 如何自定义Webpack的loader

在module中，可以自定义Webpack的loader。例如，我们想要使用stylus语言编写CSS样式文件。首先，我们需要安装stylus-loader：

npm i -D stylus-loader

然后，我们可以在webpack.base.conf.js的module中添加以下规则定义：

// ...

const stylusRule = {
  test: /\.styl$/,
  use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}

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

  // ...

  module: {
    rules: [
      {
        test: /\.vue$/,
        // ...
      },
      {
        test: /\.js$/,
        // ...
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // ...
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        // ...
      },
      stylusRule
    ]
  },

  // ...
}

以上代码中，我们将定义了一个名为stylusRule的规则对象，包含了.styl文件的匹配规则和使用的loader列表。在module中添加该规则即可。