vue-cli中的webpack配置

版本號

vue-cli 2.8.1 (終端經過vue -V 可查看)

vue 2.2.2

webpack 2.2.1

目錄結構

├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   └── main.js
└── static

webpack配置

主要對build目錄下的webpack配置作詳細分析

webpack.base.conf.js

入口文件entry

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

輸出文件output

config的配置在config/index.js文件中

output: {
  path: config.build.assetsRoot, //導出目錄的絕對路徑
  filename: '[name].js', //導出文件的文件名
  publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath : config.dev.assetsPublicPath //生產模式或開發模式下html、js等文件內部引用的公共路徑
}

文件解析resolve

主要設置模塊如何被解析。

resolve: {
  extensions: ['.js', '.vue', '.json'], //自動解析肯定的拓展名,使導入模塊時不帶拓展名
  alias: {   // 建立import或require的別名
    'vue$': 'vue/dist/vue.esm.js', 
    '@': resolve('src')
  }
}

模塊解析module

如何處理項目不一樣類型的模塊。

module: {
  rules: [
    {
      test: /\.vue$/, // vue文件後綴
      loader: 'vue-loader', //使用vue-loader處理
      options: vueLoaderConfig //options是對vue-loader作的額外選項配置
    },
    {
      test: /\.js$/, // js文件後綴
      loader: 'babel-loader', //使用babel-loader處理
      include: [resolve('src'), resolve('test')] //必須處理包含src和test文件夾
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, //圖片後綴
      loader: 'url-loader', //使用url-loader處理
      query: {  // query是對loader作額外的選項配置
        limit: 10000, //圖片小於10000字節時以base64的方式引用
        name: utils.assetsPath('img/[name].[hash:7].[ext]') //文件名爲name.7位hash值.拓展名
      }
    }，
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, //字體文件
      loader: 'url-loader', //使用url-loader處理
      query: {
        limit: 10000,  //字體文件小於1000字節的時候處理方式
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') //文件名爲name.7位hash值.拓展名
      }
    }
  ]
}

注: 關於query 僅因爲兼容性緣由而存在。請使用 options 代替。

webpack.dev.conf.js

開發環境下的webpack配置，經過merge方法合併webpack.base.conf.js基礎配置

var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {}）

模塊配置

module: {
  //經過傳入一些配置來獲取rules配置，此處傳入了sourceMap: false,表示不生成sourceMap
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 
}

在util.styleLoaders中的配置以下

exports.styleLoaders = function (options) {
  var output = [] //定義返回的數組，數組中保存的是針對各種型的樣式文件的處理方式
  var loaders = exports.cssLoaders(options) // 調用cssLoaders方法返回各種型的樣式對象(css: loader)
  for (var extension in loaders) {  //循環遍歷loaders
    var loader = loaders[extension] //根據遍歷得到的key(extension)來獲得value(loader)
    output.push({     //
      test: new RegExp('\\.' + extension + '$'), // 處理的文件類型
      use: loader  //用loader來處理，loader來自loaders[extension]
    })
  }
  return output
}

上面的代碼中調用了exports.cssLoaders(options),用來返回針對各種型的樣式文件的處理方式,具體實現以下

exports.cssLoaders = function (options) {
  options = options || {}
  
  var cssLoader = { 
    loader: 'css-loader',
    options: {  //options是loader的選項配置 
      minimize: process.env.NODE_ENV === 'production', //生成環境下壓縮文件
      sourceMap: options.sourceMap  //根據參數是否生成sourceMap文件
    }
  }
  function generateLoaders (loader, loaderOptions) {  //生成loader
    var loaders = [cssLoader] // 默認是css-loader
    if (loader) { // 若是參數loader存在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, { //將loaderOptions和sourceMap組成一個對象
          sourceMap: options.sourceMap
        })
      })
    }
    if (options.extract) { // 若是傳入的options存在extract且爲true
      return ExtractTextPlugin.extract({  //ExtractTextPlugin分離js中引入的css文件
        use: loaders,  //處理的loader
        fallback: 'vue-style-loader' //沒有被提取分離時使用的loader
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  return {  //返回css類型對應的loader組成的對象 generateLoaders()來生成loader
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

插件配置

plugins: [
  new webpack.DefinePlugin({ // 編譯時配置的全局變量
    'process.env': config.dev.env //當前環境爲開發環境
  }),
  new webpack.HotModuleReplacementPlugin(), //熱更新插件
  new webpack.NoEmitOnErrorPlugin(), //不觸發錯誤,即編譯後運行的包正常運行
  new HtmlWebpackPlugin({  //自動生成html文件,好比編譯後文件的引入
    filename: 'index.html', //生成的文件名
    template: 'index.html', //模板
    inject: true
  }),
  new FriendlyErrorsPlugin() //友好的錯誤提示
]

webpack.prod.conf.js

生產環境下的webpack配置，經過merge方法合併webpack.base.conf.js基礎配置

module的處理,主要是針對css的處理

一樣的此處調用了utils.styleLoaders

module: {
  rules: utils.styleLoaders({
    sourceMap: config.build.productionSourceMap,
    extract: true
  }) 
}

輸出文件output

output: {
  //導出文件目錄
  path: config.build.assetsRoot, 
  //導出的文件名
  filename: utils.assetsPath('js/[name].[chunkhash].js'), 
  //非入口文件的文件名，而又須要被打包出來的文件命名配置,如按需加載的模塊
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

插件plugins

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')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
plugins: [
  new webpack.DefinePlugin({
    'process.env': env //配置全局環境爲生產環境
  }),
  new webpack.optimize.UglifyJsPlugin({ //js文件壓縮插件
    compress: {  //壓縮配置
      warnings: false  // 不顯示警告
    },
    sourceMap: true //生成sourceMap文件
  }),
  new ExtractTextPlugin({ //將js中引入的css分離的插件
    filename: utils.assetsPath('css/[name].[contenthash].css') //分離出的css文件名
  }),
  //壓縮提取出的css，並解決ExtractTextPlugin分離出的js重複問題(多個文件引入同一css文件)
  new OptimizeCSSPlugin(), 
  //生成html的插件,引入css文件和js文件
  new HtmlWebpackPlugin({
    filename: config.build.index, //生成的html的文件名
    template: 'index.html', //依據的模板
    inject: true, //注入的js文件將會被放在body標籤中,當值爲'head'時，將被放在head標籤中
    minify: {  //壓縮配置
      removeComments: true, //刪除html中的註釋代碼
      collapseWhitespace: true,  //刪除html中的空白符
      removeAttributeQuotes: true  //刪除html元素中屬性的引號
    },
    chunksSortMode: 'dependency' //按dependency的順序引入
  }),
  //分離公共js到vendor中
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',  //文件名
    minChunks: functions(module, count) { // 聲明公共的模塊來自node_modules文件夾
      return (module.resource && /\.js$/.test(module.resource) && module,resource.indexOf(path.join(__dirname, '../node_modules')) === 0)
    }
  }),
  //上面雖然已經分離了第三方庫,每次修改編譯都會改變vendor的hash值，致使瀏覽器緩存失效。緣由是vendor包含了webpack在打包過程當中會產生一些運行時代碼，運行時代碼中實際上保存了打包後的文件名。當修改業務代碼時,業務代碼的js文件的hash值必然會改變。一旦改變必然會致使vendor變化。vendor變化會致使其hash值變化。
  //下面主要是將運行時代碼提取到單獨的manifest文件中，防止其影響vendor.js
  new webpack.optimize.CommonsChunkPlugin({
    name: 'mainifest',
    chunks: ['vendor']
  }),
  // 複製靜態資源,將static文件內的內容複製到指定文件夾
  new CopyWebpackPlugin([{
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']  //忽視.*文件
  }])
]

額外配置

if (config.build.productionGzip) { //配置文件開啓了gzip壓縮
  
  //引入壓縮文件的組件,該插件會對生成的文件進行壓縮，生成一個.gz文件
  var CompressionWebpackPlugin = require('compression-webpack-plugin') 

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]', //目標文件名
      algorithm: 'gzip', //使用gzip壓縮
      test: new RegExp( //知足正則表達式的文件會被壓縮
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240, //資源文件大於10240B=10kB時會被壓縮
      minRatio: 0.8 //最小壓縮比達到0.8時纔會被壓縮
    })
  )
}

npm run dev

有了上面的配置以後，下面看看運行命令npm run dev發生了什麼

在package.json文件中定義了dev運行的腳本

"scripts": {
   "dev": "node build/dev-server.js",
   "build": "node build/build.js"
},

當運行npm run dev命令時，實際上會運行dev-server.js文件

該文件以express做爲後端框架

// nodejs環境配置
var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn') //強制打開瀏覽器
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware') //使用代理的中間件
var webpackConfig = require('./webpack.dev.conf') //webpack的配置

var port = process.env.PORT || config.dev.port //端口號
var autoOpenBrowser = !!config.dev.autoOpenBrowser //是否自動打開瀏覽器
var proxyTable = config.dev.proxyTable //http的代理url

var app = express() //啓動express
var compiler = webpack(webpackConfig) //webpack編譯

//webpack-dev-middleware的做用
//1.將編譯後的生成的靜態文件放在內存中,因此在npm run dev後磁盤上不會生成文件
//2.當文件改變時,會自動編譯。
//3.當在編譯過程當中請求某個資源時，webpack-dev-server不會讓這個請求失敗，而是會一直阻塞它，直到webpack編譯完畢
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

//webpack-hot-middleware的做用就是實現瀏覽器的無刷新更新
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
//聲明hotMiddleware無刷新更新的時機:html-webpack-plugin 的template更改以後
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

//將代理請求的配置應用到express服務上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

//使用connect-history-api-fallback匹配資源
//若是不匹配就能夠重定向到指定地址
app.use(require('connect-history-api-fallback')())

// 應用devMiddleware中間件
app.use(devMiddleware)
// 應用hotMiddleware中間件
app.use(hotMiddleware)

// 配置express靜態資源目錄
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

var uri = 'http://localhost:' + port

//編譯成功後打印uri
devMiddleware.waitUntilValid(function () {
  console.log('> Listening at ' + uri + '\n')
})
//啓動express服務
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  // 知足條件則自動打開瀏覽器
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

npm run build

因爲package.json中的配置，運行此命令後會執行build.js文件

process.env.NODE_ENV = 'production' //設置當前環境爲production
var ora = require('ora') //終端顯示的轉輪loading
var rm = require('rimraf')  //node環境下rm -rf的命令庫
var path = require('path')  //文件路徑處理庫
var chalk = require('chalk')  //終端顯示帶顏色的文字
var webpack = require('webpack') 
var config = require('../config') 
var webpackConfig = require('./webpack.prod.conf') //生產環境下的webpack配置

// 在終端顯示ora庫的loading效果
var spinner = ora('building for production...')
spinner.start()

// 刪除已編譯文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  //在刪除完成的回調函數中開始編譯
  webpack(webpackConfig, function (err, stats) {
    spinner.stop() //中止loading
    if (err) throw err
    
    // 在編譯完成的回調函數中,在終端輸出編譯的文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')
  })
})