vue-cli中配置webpack系列文章一 ------build.js

netScorpion 發(fā)布于2019-08-26 13:51 / 1821人閱讀

摘要：設(shè)置引入可以實(shí)現(xiàn)效果引入模塊引入模塊引入模塊命令引入環(huán)境引入公共配置加載時(shí)顯示的文本加載動(dòng)畫開始清空靜態(tài)資源的二級(jí)目錄下所有內(nèi)容啟動(dòng)編譯生產(chǎn)環(huán)境配置加載動(dòng)畫結(jié)束如果出錯(cuò)，拋出錯(cuò)誤標(biāo)準(zhǔn)輸出流命令行窗口向用戶顯示內(nèi)容返回格式化結(jié)果

build.js

  // 設(shè)置process.env.NODE_ENV
  process.env.NODE_ENV = "production"
  //引入ora,可以實(shí)現(xiàn)loading效果
  var ora = require("ora");
  //引入webpack模塊
  var webpack = require("webpack");
  //引入path模塊
  var path = require("path");
  // 引入rimraf模塊
  // "rm -rf"命令
  var rm = require("rimraf")
  //引入pro環(huán)境
  var webpackConfig = require("./webpack.prod.conf");
  //引入公共配置
  var config = require("../config/index");
  
  //加載時(shí)顯示的文本
  var spinner = ora("building for production...");
  
  //加載動(dòng)畫開始
  spinner.start()
  
  var assetsPath = path.join(config.build.assetsRoot,config.build.assetsSubDirectory);
  // 清空靜態(tài)資源的二級(jí)目錄下所有內(nèi)容
  rm(assetsPath,err=>{
      if (err) throw err
  
      //啟動(dòng)webpack編譯生產(chǎn)環(huán)境webpack配置
      webpack(webpackConfig,function (eror,stats) {
          //加載動(dòng)畫結(jié)束
          spinner.stop();
          //// 如果出錯(cuò)，拋出錯(cuò)誤
          if(eror) throw eror
  
          // process.stdout標(biāo)準(zhǔn)輸出流
          // rocess.stdout.write命令行窗口向用戶顯示內(nèi)容
          // stats.toString(options)返回格式化結(jié)果
          process.stdout.write(stats.toString({
                  colors: true,
                  modules: false,
                  children: false,
                  chunks: false,
                  chunkModules: false
              })+"
")
      })
  
  })

云服務(wù)器 GPU云服務(wù)器系列一 webpack cdn配置 webpack配置cdn webpack常用配置項(xiàng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109654.html

相關(guān)文章

vue-cli解析

摘要：在中，設(shè)置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項(xiàng)等參數(shù)。下面還有一個(gè)的對(duì)象，它是在本地服務(wù)器啟動(dòng)時(shí)，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。前言這段時(shí)間，算是空出手來寫幾篇文章了。由于很久都沒有時(shí)間整理現(xiàn)在所用的東西了，所以，接下來會(huì)慢慢整理出一些文檔來記錄前段時(shí)間的工作和生活。這篇文章的主...

KunMinX 2019-08-21 18:24 評(píng)論0 收藏0
vue學(xué)習(xí)系列（二）vue-cli

摘要：一介紹是官方提供的腳手架，用來快速建立項(xiàng)目。標(biāo)識(shí)項(xiàng)目名稱，這個(gè)你可以根據(jù)自己的項(xiàng)目來起名字。初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴，否則無法運(yùn)行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。一.介紹 vue-cli是官方提供的腳手架，用來快速建立項(xiàng)目。二.安裝 npm install vue-cli -g//全局安裝三.初始化項(xiàng)目 vue init ...

baishancloud 2019-08-26 11:50 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)

摘要：詳細(xì)具體的使用可以見文章手摸手，帶你優(yōu)雅的使用。為了加速線上鏡像構(gòu)建的速度，我們利用源進(jìn)行加速并且將一些常見的依賴打入了基礎(chǔ)鏡像，避免每次都需要重新下載。完整項(xiàng)目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 評(píng)論0 收藏0
webpack配合vue.js實(shí)現(xiàn)完整的單頁面demo

摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因?yàn)樾枰玫降模源_保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...

2450184176 2019-08-19 18:35 評(píng)論0 收藏0
webpack開發(fā)與生產(chǎn)環(huán)境配置

摘要：豹哥對(duì)于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動(dòng)時(shí)的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡單工具函數(shù)等等。是關(guān)于整個(gè)項(xiàng)目的環(huán)境配置包括開發(fā)與生產(chǎn)。前言作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個(gè)時(shí)候工作重點(diǎn)主要也是 vue 的使用，對(duì)webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...

afishhhhh 2019-08-20 18:32 評(píng)論0 收藏0