詳解 vue-cli 的打包配置文件代碼（給你們寫寫註釋）

時間 2019-11-24

原文原文鏈接

1、前言css

　　對於webpack基礎很差，node指令不通的童鞋。估計對本身搭建Vue、react腳手架是至關頭疼的，有種無從下手的感受。然而，從頭看這2塊，耗時太長，並且說實話得練才行，不練練手看不明白。那大多數人就採起折中的方案，修改爲熟的腳手架，改爲本身想要的樣子。這個相對來講難度下降了很多，不過依然會有不少難點不加不明白。因此這裏就以Vue的腳手架爲例子，將源碼加上註釋，方便你們加深對項目配置的理解，少走彎路。html

2、vue-cli 都作了什麼vue

　　先跟你們簡單說說，vue-cli 都作了什麼，你們也對他有個大致的瞭解node

　　一、build/dev-server.js 文件項目node的啓動文件，這裏面作了webpack配置和node操做，react

　　二、build/webpack.base.conf.js webpack基本配置文件webpack

　　三、build/webpack.dev.conf.js 開發環境webpack配置ios

　　四、build/webpack.prod.conf.js 正式環境的webpack配置git

　　五、build/build.js 執行打包的配置文件github

　　六、config/index.js 開發、線上環境的文件輸出、打包等一些配置web

　　這是腳手架裏面的一些主要配置文件，經過配置，整個項目分爲開發環境和生產環境，不須要你多作不少繁瑣的工做，用起來很方便，若是你想按照本身的喜愛或者需求，能夠修改主題文件的配置，下面咱們就附上上述每一個文件的代碼和註釋。　　　　ps：代碼我修改過，不是徹底同樣的，你們主要看看文件功能，和一些代碼、組件的含義。

3、具體文件代碼詳解

　　一、build/dev-server.js

// 檢查 Node 和 npm 版本
require('./check-versions')() // 獲取 config/index.js 的默認配置
var config = require('../config') // 若是 Node 的環境沒法判斷當前是 dev / product 環境 // 使用 config.dev.env.NODE_ENV 做爲當前的環境
if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } // 一個能夠強制打開瀏覽器並跳轉到指定 url 的插件
var opn = require('opn') // 使用 NodeJS 自帶的文件路徑工具
var path = require('path') // 使用 express
var express = require('express') // 使用 webpack
var webpack = require('webpack') // 使用 proxyTable 熱更新
var proxyMiddleware = require('http-proxy-middleware') // 使用 dev 環境的 webpack 配置
var webpackConfig = require('./webpack.dev.conf') // 使用axios請求
var axios = require('axios') // 若是沒有指定運行端口，使用 config.dev.port 做爲運行端口
var port = process.env.PORT || config.dev.port var autoOpenBrowser = !!config.dev.autoOpenBrowser // 使用 config.dev.proxyTable 的配置做爲 proxyTable 的代理配置
var proxyTable = config.dev.proxyTable // 使用 express 啓動一個服務，URL改一下，這裏是作服務轉發，還能夠對
var app = express() var apiRoutes = express.Router() apiRoutes.get('/getDiscList', function (req, res) { var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { res.json(response.data) }).catch((e) => { console.log(e) }) }) apiRoutes.get('/lyric', function (req, res) { var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { var ret = response.data if (typeof ret === 'string') { var reg = /^\w+\(({[^()]+})\)$/
      var matches = ret.match(reg) if (matches) { ret = JSON.parse(matches[1]) } } res.json(ret) }).catch((e) => { console.log(e) }) }) app.use('/api', apiRoutes) var compiler = webpack(webpackConfig) // 啓動 webpack-dev-middleware，將 編譯後的文件暫存到內存中
var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true }) // 啓動 webpack-hot-middleware，也就是咱們常說的 Hot-reload
var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) // force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // 將 proxyTable 中的請求配置掛在到啓動的 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')()) // 將暫存到內存中的 webpack 編譯後的文件掛在到 express 服務上
app.use(devMiddleware) // 將 Hot-reload 掛在到 express 服務上
app.use(hotMiddleware) // 拼接 static 文件夾的靜態資源路徑
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 爲靜態資源提供響應服務
app.use(staticPath, express.static('./static')) var uri = 'http://localhost:' + port var _resolve var readyPromise = new Promise(resolve => { _resolve = resolve }) console.log('> Starting dev server...') devMiddleware.waitUntilValid(() => { console.log('> Listening at ' + uri + '\n') // 若是不是測試環境，自動打開瀏覽器並跳到咱們的開發地址
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } _resolve() }) // 讓咱們這個 express 服務監聽 port 的請求，而且將此服務做爲 dev-server.js 的接口暴露
var server = app.listen(port) module.exports = { ready: readyPromise, close: () => { server.close() } }

　　二、build/webpack.base.conf.js

var path = require('path') var utils = require('./utils') var config = require('../config') // .vue 文件配置 loader 及工具 (autoprefixer)
var vueLoaderConfig = require('./vue-loader.conf') // 拼接咱們的工做區路徑爲一個絕對路徑的函數
function resolve(dir) { return path.join(__dirname, '..', dir) } // webpack 配置，輸入、輸出、模塊、插件
module.exports = { entry: { 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: { // 自動補全的擴展名
    extensions: ['.js', '.vue', '.json'], // 默認路徑代理，即起別名，例如 import Vue from 'vue'，會自動到 'vue/dist/vue.common.js'中尋找
 alias: { '@': resolve('src'), 'common': resolve('src/common'), 'components': resolve('src/components'), 'base': resolve('src/base'), 'api': resolve('src/api') } }, module: { rules: [ // 須要處理的文件及使用的 loader
 { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { // eslint 代碼檢查配置工具
          formatter: require('eslint-friendly-formatter') } }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }

　　三、build/webpack.dev.conf.js

// 使用一些小工具
var utils = require('./utils') var webpack = require('webpack') // 一樣的使用了 config/index.js 的預設配置
var config = require('../config') // 使用 webpack 配置合併插件
var merge = require('webpack-merge') // 加載 webpack.base.conf
var baseWebpackConfig = require('./webpack.base.conf') // 使用 html-webpack-plugin 插件，這個插件能夠幫咱們自動生成 html 而且注入到 .html 文件中
var HtmlWebpackPlugin = require('html-webpack-plugin') // 一個友好的錯誤提示插件
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 將 Hol-reload 相對路徑添加到 webpack.base.conf 的 對應 entry 前
Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) // 將咱們 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置合併
module.exports = merge(baseWebpackConfig, { module: { // 使用 styleLoaders
 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // 使用 #eval-source-map 模式做爲開發工具，此配置可參考 DDFE 往期文章詳細瞭解
  devtool: '#cheap-module-eval-source-map', plugins: [ // definePlugin 接收字符串插入到代碼當中, 因此你須要的話能夠寫上 JS 的字符串
    new webpack.DefinePlugin({ 'process.env': config.dev.env }), // definePlugin 接收字符串插入到代碼當中, 因此你須要的話能夠寫上 JS 的字符串
    // HotModule 插件在頁面進行變動的時候只會重回對應的頁面模塊，不會重繪整個 html 文件
    new webpack.HotModuleReplacementPlugin(), // 遇到報錯，跳過還行，並提示錯誤信息
    new webpack.NoEmitOnErrorsPlugin(), // 將 index.html 做爲入口，注入 html 代碼後生成 index.html文件
    new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // 使用這個插件，更好的輸出錯誤信息
    new FriendlyErrorsPlugin() ] })

　　四、build/webpack.prod.conf.js

var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') // 加載 webpack 配置合併工具
var merge = require('webpack-merge') // 加載 webpack.base.conf.js文件
var baseWebpackConfig = require('./webpack.base.conf') var CopyWebpackPlugin = require('copy-webpack-plugin') // 一個能夠插入 html 而且建立新的 .html 文件的插件
var HtmlWebpackPlugin = require('html-webpack-plugin') // 一個 webpack 擴展，能夠提取一些代碼而且將它們和文件分離開 // 若是咱們想將 webpack 打包成一個文件 css js 分離開，那咱們須要這個插件
var ExtractTextPlugin = require('extract-text-webpack-plugin') var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') var env = config.build.env // 合併 webpack.base.conf.js
var webpackConfig = merge(baseWebpackConfig, { module: { // 使用的 loader
 rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, // 是否使用 #source-map 開發工具，更多信息能夠查看 DDFE 往期文章
  devtool: config.build.productionSourceMap ? '#source-map' : false, output: { // 編譯輸出目錄
 path: config.build.assetsRoot, // 編譯輸出文件名
    // 咱們能夠在 hash 後加 :6 決定使用幾位 hash 值
    filename: utils.assetsPath('js/[name].[chunkhash].js'), // 沒有指定輸出名的文件輸出的文件名
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: [ // definePlugin 接收字符串插入到代碼當中, 因此你須要的話能夠寫上 JS 的字符串
    new webpack.DefinePlugin({ 'process.env': env }), // 壓縮 js (一樣能夠壓縮 css)
    new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // 將 css 文件分離出來
    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 } }), // 輸入輸出的 .html 文件
    new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', // 是否注入 html
      inject: true, // 壓縮的方式
 minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), // 沒有指定輸出文件名的文件輸出的靜態文件名
    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 ) } }), // 沒有指定輸出文件名的文件輸出的靜態文件名
    new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }), // copy custom static assets
    new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }) // 開啓 gzip 的狀況下使用下方的配置
if (config.build.productionGzip) { // 加載 compression-webpack-plugin 插件
  var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( // 使用 compression-webpack-plugin 插件進行壓縮
    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

　　五、build/build.js

// 檢查 Node 和 npm 版本
require('./check-versions')() // 當node沒法判斷是本地仍是線上時，這裏默認寫上線上
process.env.NODE_ENV = 'production'
// 一個很好看的 loading 插件
var ora = require('ora') var rm = require('rimraf') var path = require('path') var chalk = require('chalk') var webpack = require('webpack') var config = require('../config') // 加載 webpack.prod.conf文件
var webpackConfig = require('./webpack.prod.conf') // 使用 ora 打印出 loading + log
var spinner = ora('building for production...') // 開始 loading 動畫
spinner.start() // 刪除打包後的文件夾，從新生成打包後的文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err // 開始 webpack 的編譯
  webpack(webpackConfig, function (err, stats) { // 編譯成功的回調函數
 spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') console.log(chalk.cyan('  Build complete.\n')) console.log(chalk.yellow( '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n' )) }) })

　　六、config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path') module.exports = { // production 環境
 build: { // 使用 config/prod.env.js 中定義的編譯環境
    env: require('./prod.env'), port: 9000, index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸出的靜態資源根路徑
    assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的二級目錄
    assetsSubDirectory: 'static', // 編譯發佈上線路徑的根目錄，可配置爲資源服務器域名或 CDN 域名
    assetsPublicPath: '', // 是否開啓 cssSourceMap
    productionSourceMap: true, // 是否開啓 gzip
    productionGzip: false, // 須要使用 gzip 壓縮的文件擴展名
    productionGzipExtensions: ['js', 'css'], // 插件叫作bundleAnalyzerReport，上面有幾行註釋，講的是隻要在打包的時候輸入npm run build --report,就能夠在打包的同時查看每一個打包生成的js，裏面的庫的構成狀況，方便咱們進行相關的刪減，好比有的庫太大了，是否能夠本身實現，有的庫是否有必要，能否刪除之類
 bundleAnalyzerReport: process.env.npm_config_report }, // 使用 config/dev.env.js 中定義的編譯環境
 dev: { env: require('./dev.env'), // 運行測試頁面的端口
    port: 8080, // 是否自動打開瀏覽器
    autoOpenBrowser: true, // 編譯輸出的二級目錄
    assetsSubDirectory: 'static', // 編譯發佈上線路徑的根目錄，可配置爲資源服務器域名或 CDN 域名
    assetsPublicPath: '/', // 須要 proxyTable 代理的接口（可跨域）
 proxyTable: {}, // 是否開啓 cssSourceMap
    cssSourceMap: false } }