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

/**
 * 驗(yàn)證版本
 */
'use strict'
//chalk是一個(gè)顏色插件。可以通過
const chalk = require('chalk')
//semver一個(gè)版本控制插件
const semver = require('semver')
const packageConfig = require('../package.json')
//shelljss是nodejs對(duì)與多進(jìn)程的支持，是對(duì)于child_process封裝
const shell = require('shelljs')

function exec (cmd) {
 return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
 {//對(duì)應(yīng)node的版本
  name: 'node',
  //當(dāng)前環(huán)境版本，semver.clean把當(dāng)前環(huán)境版本信息轉(zhuǎn)化規(guī)定格式，也是' =v1.2.3 '->'1.2.3'
  currentVersion: semver.clean(process.version),
  //要求版本，對(duì)應(yīng)package.json的engines所配置的信息
  versionRequirement: packageConfig.engines.node
 }
]

//npm環(huán)境中
if (shell.which('npm')) {
 versionRequirements.push({
  name: 'npm',
  //執(zhí)行方法得到版本號(hào)
  currentVersion: exec('npm --version'),
  versionRequirement: packageConfig.engines.npm
 })
}

module.exports = function () {
 const warnings = []

 for (let i = 0; i < versionRequirements.length; i++) {
  const mod = versionRequirements[i]

  //如果版本號(hào)不符合package.json文件中指定的版本號(hào)，就執(zhí)行下面的代碼
  if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
   warnings.push(mod.name + ': ' +
    chalk.red(mod.currentVersion) + ' should be ' +
    chalk.green(mod.versionRequirement)
   )
  }
 }

 if (warnings.length) {
  console.log('')
  console.log(chalk.yellow('To use this template, you must update following to modules:'))
  console.log()

  for (let i = 0; i < warnings.length; i++) {
   const warning = warnings[i]
   console.log(' ' + warning)
  }

  console.log()
  process.exit(1)
 }
}

/**
 * webpack開發(fā)環(huán)境：主要用來處理css-loader和vue-style-loader
 */

'use strict'
const path = require('path')
const config = require('../config')
//引入extract-text-webpack-plugin插件，用來將css提取到單獨(dú)的css文件中
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
 //process.env.NODE_ENV在bulid.js中定義
 //如果為生產(chǎn)環(huán)境assetsSubDirectory為“static”，否則也為“static”
 //config.build.assetsSubDirectory與config.dev.assetsSubDirectory都在config/index中定義
 const assetsSubDirectory = process.env.NODE_ENV === 'production'
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory

 //path.join和path.posix.join區(qū)別前者返回完整路徑，后者返回完整路徑的相對(duì)路徑
 //例：path.join是E:/shishans/blogsss/static，path.posix.join是static
 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
 options = options || {}

 //css-loader的基本配置
 const cssLoader = {
  loader: 'css-loader',
  options: {
   //option用于配置loder的
   //是否開啟cssMap，默認(rèn)是false
   //一般我們會(huì)壓縮js或者css以節(jié)省寬帶,但在開發(fā)壓縮就很難調(diào)試
   //所以用sourceMap進(jìn)行關(guān)聯(lián)，給出對(duì)應(yīng)的sourceMap文件
   sourceMap: options.sourceMap
  }
 }

 const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  //將上面的基礎(chǔ)配置放到一個(gè)數(shù)據(jù)中
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  //如果該函數(shù)傳遞了單獨(dú)的loder就加入到loaders數(shù)組中例如：sass或者less之類的
  if (loader) {
   loaders.push({
    //加載對(duì)應(yīng)的loader
    loader: loader + '-loader',
    //es6方法Object.assign：主要用于合并對(duì)象的，淺拷貝
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  // extract自定義屬性，用ExtractTextPlugin.extract控制是否把文件單獨(dú)提取
  // true：?jiǎn)为?dú)提取，false表示不提取
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   //[].concat()方法用于連接數(shù)組
   return ['vue-style-loader'].concat(loaders)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),//返回[cssLoader, vue-style-loader]
  postcss: generateLoaders(),//返回[cssLoader, vue-style-loader]
  less: generateLoaders('less'),//返回[cssLoader, vue-style-loader, less]
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

// Generate loaders for standalone style files (outside of .vue)
// 這個(gè)方法主要處理import這種方式導(dǎo)入的文件類型的打包
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)

 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }

 return output
}

//用于返回腳手架錯(cuò)誤的函數(shù)
exports.createNotifierCallback = () => {
 //使用node-notifier來發(fā)送桌面消息,包括應(yīng)用狀態(tài)改變以及錯(cuò)誤信息
 const notifier = require('node-notifier')

 return (severity, errors) => {
  if (severity !== 'error') return

  const error = errors[0]
  const filename = error.file && error.file.split('!').pop()

  notifier.notify({
   title: packageConfig.name,
   message: severity + ': ' + error.name,
   subtitle: filename || '',
   icon: path.join(__dirname, 'logo.png')
  })
 }
}

/**
 * webpack開發(fā)環(huán)境和生成環(huán)境通用的配置
 */

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

//獲取對(duì)應(yīng)文件路徑的函數(shù)
//因?yàn)樵撐募窃陧?xiàng)目的二級(jí)文件build下，所以要加上../這樣才能找到像src這樣的目錄
function resolve (dir) {
 //join方法用于將多個(gè)字符串結(jié)合成一個(gè)路徑字符串
 //path在node中會(huì)經(jīng)常用到可以仔細(xì)了解一下path的各種方法
 //__dirname：獲取當(dāng)前文件所在目錄的完整絕對(duì)路徑
 return path.join(__dirname, '..', dir)
}

//eslint用來檢查我們寫的js代碼是否滿足指定的規(guī)則
const createLintingRule = () => ({
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
  formatter: require('eslint-friendly-formatter'),
  emitWarning: !config.dev.showEslintErrorsInOverlay
 }
})

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  //入口文件是src下的main.js
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
  //自動(dòng)解析確定的擴(kuò)展,在引入模塊時(shí)不帶擴(kuò)展名
  //例如：import somejs from "@/some"
  extensions: ['.js', '.vue', '.json'],
  alias: {
   // 后面的$符號(hào)指精確匹配
   // 也就是說只能使用 import vuejs from "vue" 這樣的方式導(dǎo)入vue.esm.js文件
   'vue$': 'vue/dist/vue.esm.js',
   // resolve('src') 其實(shí)在這里就是項(xiàng)目根目錄中的src目錄
   // 例如引用src目錄下的some.js方法:import somejs from "@/some.js"
   // 用@來代替../src
   '@': resolve('src'),
  }
 },
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },
 node: {
  // prevent webpack from injecting useless setImmediate polyfill because Vue
  // source contains it (although only uses it if it's native).
  setImmediate: false,
  // prevent webpack from injecting mocks to Node native modules
  // that does not make sense for the client
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty'
 }
}

/**
 * 此文件用于開發(fā)環(huán)境下的webpack配置
 * 就本項(xiàng)目執(zhí)行npm run dev 和 npm run start都會(huì)用到這個(gè)文件的配置
 * 具體可以參考JavaScript中"scripts"的配置
 */
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
//生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//friendly-errors-webpack-plugin:把webpack的錯(cuò)誤和日志搜集起來展現(xiàn)給用戶
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 // devtool是開發(fā)工具選項(xiàng)，用來指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性價(jià)比最高
 // 生產(chǎn)環(huán)境：#source-map
 // 開發(fā)環(huán)境：#cheap-module-eval-source-map 編譯消耗小
 devtool: config.dev.devtool,

 // these devServer options should be customized in /config/index.js
 devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  }
 },
 plugins: [
  // DefinePlugin內(nèi)置webpack插件，專門用來定義全局變量的
  // 下面定義一個(gè)全局變量 process.env 并且值是如下
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  // 這個(gè)插件幫助你實(shí)現(xiàn)無刷新加載，關(guān)于內(nèi)部實(shí)現(xiàn)原理
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
  }),
  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
   }
  ])
 ]
})

module.exports = new Promise((resolve, reject) => {
 portfinder.basePort = process.env.PORT || config.dev.port
 portfinder.getPort((err, port) => {
  if (err) {
   reject(err)
  } else {
   // publish the new Port, necessary for e2e tests
   process.env.PORT = port
   // add port to devServer config
   devWebpackConfig.devServer.port = port

   // Add FriendlyErrorsPlugin
   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
   }))

   resolve(devWebpackConfig)
  }
 })
})