介紹vue-cli腳手架config目錄下index.js配置文件

時間 2019-12-12

標籤介紹 vue cli 腳手架 config 目錄 index.js index 配置文件欄目 JavaScript 简体版

原文原文鏈接

一、config/index.jscss

var path = require('path')

module.exports = {
  build: { // production 環境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
    index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    productionSourceMap: false, // 是否開啓 cssSourceMap
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 是否開啓 gzip
    productionGzipExtensions: ['js', 'css'] // 須要使用 gzip 壓縮的文件擴展名
  },
  dev: { // dev 環境
    env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
    port: 8080, // 運行測試頁面的端口
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    proxyTable: {}, // 須要 proxyTable 代理的接口（可跨域）
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false // 是否開啓 cssSourceMap
  }
}

二、build/build.js頁面html

require('./check-versions')()// 檢查 Node 和 npm 版本

process.env.NODE_ENV = 'production'

const ora = require('ora') // 一個很好看的 loading 插件
const path = require('path')
const config = require('../config')//加載config.js
const webpack = require('webpack')//加載webpack
const webpackConfig = require('./webpack.prod.conf')// 加載 webpack.prod.conf


console.log( //  輸出提示信息 ～ 提示用戶請在 http 服務下查看本頁面，不然爲空白頁
  '  Tip:\n' +
  '  Built files are meant to be served over an HTTP server.\n' +
  '  Opening index.html over file:// won\'t work.\n'
)

var spinner = ora('building for production...')  // 使用 ora 打印出 loading + log
spinner.start()  // 開始 loading 動畫


/* 拼接編譯輸出文件路徑 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath) /* 刪除這個文件夾 （遞歸刪除） */
mkdir('-p', assetsPath) /* 建立此文件夾 */
cp('-R', 'static/*', assetsPath) /* 複製 static 文件夾到咱們的編譯輸出目錄 */

webpack(webpackConfig, function (err, stats) {  //  開始 webpack 的編譯
  // 編譯成功的回調函數
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n')
})

三、build/webpack.base.conf.jsvue

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 環境下開啓 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 環境下開啓 cssSourceMap ，在 config/index.js 中可配置 */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最終是否使用 cssSourceMap */

module.exports = {
  entry: utils.getEntries('./src/module/**/*.js'),// 配置webpack編譯入口
  output: {// 配置webpack輸出路徑和命名規則
    path: config.build.assetsRoot,// webpack輸出的目標文件夾路徑（例如：/dist）
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'// webpack輸出bundle文件命名格式，基於文件的md5生成Hash名稱的script來防止緩存
  },
  resolve: {
    extensions: ['', '.js', '.vue'],//自動解析肯定的拓展名,使導入模塊時不帶拓展名
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {// 建立import或require的別名，一些經常使用的，路徑長的均可以用別名
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    loaders: [
      {
        test: /\.vue$/, // vue文件後綴
        loader: 'vue'   //使用vue-loader處理
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 500000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  vue: {// .vue 文件配置 loader 及工具 (autoprefixer)
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),// 調用cssLoaders方法返回各種型的樣式對象(css: loader)
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}

四、build/webpack.prod.conf.jsnode

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')// 一個能夠合併數組和對象的插件
const baseWebpackConfig = require('./webpack.base.conf')
// 用於從webpack生成的bundle中提取文本到特定文件中的插件
// 能夠抽取出css，js文件將其與webpack輸出的bundle分離
const HtmlWebpackPlugin = require('html-webpack-plugin')// 一個用於生成HTML文件並自動注入依賴文件（link/script）的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')//若是咱們想用webpack打包成一個文件，css js分離開，須要這個插件

var env = config.build.env
// 合併基礎的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
  // 配置樣式文件的處理規則，使用styleLoaders
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false, // 開啓source-map，生產環境下推薦使用cheap-source-map或source-map，後者獲得的.map文件體積比較大，可是可以徹底還原之前的js代碼
  output: {
    path: config.build.assetsRoot,// 編譯輸出目錄
    filename: utils.assetsPath('js/[name].[chunkhash].js'),  // 編譯輸出文件名格式
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  // 沒有指定輸出名的文件輸出的文件名格式
  },
  vue: { // vue裏的css也要單獨提取出來
    loaders: utils.cssLoaders({ // css加載器，調用了utils文件中的cssLoaders方法,用來返回針對各種型的樣式文件的處理方式,
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // 從新配置插件項
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // 位於開發環境下
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({// 醜化壓縮代碼
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // extract css into its own file
    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  // 抽離css文件
    // 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
    // filename 生成網頁的HTML名字，能夠使用/來控制文件文件的目錄結構，最
    // 終生成的路徑是基於webpac配置的output.path的
   /* new HtmlWebpackPlugin({
      // 生成html文件的名字，路徑和生產環境下的不一樣，要與修改後的publickPath相結合，不然開啓服務器後頁面空白
      filename: config.build.index,
      // 源文件，路徑相對於本文件所在的位置
      template: 'index.html',
      inject: true,// 要把<script>標籤插入到頁面哪一個標籤裏(body|true|head|false)
      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'
    }),*/
    // 若是文件是多入口的文件，可能存在，重複代碼，把公共代碼提取出來，又不會重複下載公共代碼了
    // （多個頁面間會共享此文件的緩存）
    // CommonsChunkPlugin的初始化經常使用參數有解析？
    // name: 這個給公共代碼的chunk惟一的標識
    // filename，如何命名打包後生產的js文件，也是能夠用上[name]、[hash]、[chunkhash]
    // minChunks，公共代碼的判斷標準：某個js模塊被多少個chunk加載了纔算是公共代碼
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // 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
        )
      }
    }),
    // 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({ // 爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
      name: 'manifest',
      chunks: ['vendor']
    })*/
  ]
})
// gzip模式下須要引入compression插件進行壓縮
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) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

var pages = utils.getEntries('./src/module/**/*.html')
for(var page in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: page + '.html',
    template: pages[page], //模板路徑
    inject: true,
    // excludeChunks 容許跳過某些chunks, 而chunks告訴插件要引用entry裏面的哪幾個入口
    // 如何更好的理解這塊呢？舉個例子：好比本demo中包含兩個模塊（index和about），最好的固然是各個模塊引入本身所需的js，
    // 而不是每一個頁面都引入全部的js，你能夠把下面這個excludeChunks去掉，而後npm run build，而後看編譯出來的index.html和about.html就知道了
    // filter：將數據過濾，而後返回符合要求的數據，Object.keys是獲取JSON對象中的每一個key
    excludeChunks: Object.keys(pages).filter(item => {
      return (item != page)
    })
  }
  // 須要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}