解析

webpack.base.conf.js

配有一些基礎(chǔ)要素包括，會(huì)和 通常的webapck.config.js類似。

// 0. 引入一些依賴
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {                  // 1. 入口文件配置
    app: './src/main.js'
  },
  output: {                 // 2. 輸出文件配置
    path: config.build.assetsRoot,    // 輸出目錄的絕對(duì)路徑
    filename: '[name].js',            // 輸出的文件的名稱，name為對(duì)應(yīng)entry的key
    publicPath: process.env.NODE_ENV === 'production'   // 生產(chǎn)模式或開發(fā)模式下html、js等文件內(nèi)部引用的公共路徑(請(qǐng)求的靜態(tài)資源絕對(duì)路徑)
      ? config.build.assetsPublicPath  
      : config.dev.assetsPublicPath
  },                        
  resolve: {                // 3. 文件解析配置，設(shè)置模塊如何被解析
    // 在代碼中通過require/import模塊的相關(guān)配置，預(yù)定義了.js 和.vue的擴(kuò)展，這樣在引用一個(gè)hello.js文件時(shí)，我們只需要import Hello from '/path/to/directory/hello'就能夠做到
    extensions: ['.js', '.vue', '.json'],   // 自動(dòng)解析確定的拓展名,使導(dǎo)入模塊時(shí)不帶拓展名，即在require/import模塊路徑中自動(dòng)補(bǔ)全文件后綴
    alias: {                                // 路徑的別名，require/import模塊路徑中可以通過別名縮短路徑字符串的長(zhǎng)度，節(jié)省了大量時(shí)間去計(jì)算文件與文件之間的嵌套關(guān)系
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {                 // 4. 模塊解析配置，如何處理項(xiàng)目不同類型的模塊
    rules: [
      {
        test: /\.(js|vue)$/,      // 代碼文件后綴
        loader: 'eslint-loader',
        enforce: "pre",
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,           // vue文件后綴
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,            // js文件后綴
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        // 圖片文件后綴
        loader: 'url-loader',
        query: {
          limit: 10000, // 當(dāng)圖片大小小于10kb時(shí)，會(huì)生成一個(gè)base64串打包到編譯后的js文件里，若超過10kb會(huì)單獨(dú)生成一個(gè)文件
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,       // 字體文件后綴
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

webpack.dev.conf.js

這個(gè)配置將針對(duì)我們本機(jī)開發(fā)時(shí)使用。

var utils = require('./utils')          // 工具方法
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')    // 合并配置文件
var baseWebpackConfig = require('./webpack.base.conf') // 開發(fā)時(shí)和運(yùn)行時(shí)共享的的webpack配置文件
var HtmlWebpackPlugin = require('html-webpack-plugin') // 操作html文件的插件
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

Object.keys(baseWebpackConfig.entry).forEach(function (name) {    // 啟用熱加載       
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {   //通過傳入一些配置來獲取rules配置，此處傳入了sourceMap: false,表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  devtool: '#cheap-module-eval-source-map',         // 指定sourceMap類型 方便源碼定位
  plugins: [                                        // 一些額外的插件，不是必須的
    new webpack.DefinePlugin({                  // 編譯時(shí)配置的全局變量
      'process.env': config.dev.env   //當(dāng)前環(huán)境為開發(fā)環(huán)境
    }),
    new webpack.HotModuleReplacementPlugin(),   // 熱更新插件
    new webpack.NoEmitOnErrorsPlugin(),         // 不觸發(fā)錯(cuò)誤,即編譯后運(yùn)行的包正常運(yùn)行，編譯出錯(cuò)時(shí)跳過那部分代碼
    new HtmlWebpackPlugin({                     // 以現(xiàn)有html為模板去生成新的html以及相應(yīng)配置，比如編譯后文件的引入
      filename: 'index.html', //生成的文件名
      template: 'index.html', //模板
      inject: true            // 表示css、js路徑自動(dòng)添加到該html文件里（css->header標(biāo)簽,js->body），也可配置
    }),
    new FriendlyErrorsPlugin()                  // 友好的錯(cuò)誤提示
  ]
})

webpack.prod.conf.js

生產(chǎn)環(huán)境下的webpack配置，通過merge方法合并webpack.base.conf.js基礎(chǔ)配置，這個(gè)文件將定義打包好的生成文件。

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')          // 針對(duì) vue文件里的樣式單獨(dú)拆分，這樣他們會(huì)被合并到css文件里去
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        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
      },
      chunksSortMode: 'dependency'
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

參考

Vue 入門系列之手把手教你搭Webpack
vue-cli中的webpack配置
Vue.js學(xué)習(xí)系列四——Webpack打包工具的使用（裝修中……）