Javascript - Vue - webpack + vue-cil

cnpm（node package manager）和webpack模塊

npm是運行在node.js環境下的包管理工具（先安裝node.js，再經過命令

npm install npm -g

安裝npm），使用npm能夠很快速的安裝前端文件裏須要依賴的那些項目文件，好比js、css文件等。首先須要經過npm命令在根目錄建立一個packg.json配置文件，這個文件定義了你的項目所須要的各類模塊，以及項目的名稱、版本、許可證等元數據、以json格式配置項目所需的運行和開發環境。cnpm是npm的淘寶鏡像，cnpm的指令與npm是徹底同樣的，把npm改成cnpm便可。

安裝packg.json配置文件

cnpm init -y //在根目錄安裝packg.json，y表示yes，將略過全部問答，所有采用默認配置。安裝成功項目根目錄會出現package.json

安裝webpack

webpack的做用有兩個

1.能夠能夠將js、css等文件模塊打包，會自動分析你的項目結構，找到這些模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏

覽器使用。好比js文件並不能引用其餘js文件，除非使用ES6的語法import，這種語法如今不少瀏覽器並不支持，webpack能夠對其轉換打包成一個能夠被瀏覽器解析的文件。

2.一個html頁面上的link、javascript和img等標籤老是會默認發起ajax請求向服務器索要html依賴的各類程序文件和圖片、字體圖標，這會形成頁面加載速度不夠理想。使用webpack後，由webpack統一管理這些耗時的每次請求，你不須要在每一個html頁面上引入那些繁多的程序文件、圖片和字體圖標，只須要引入同一個文件（裝載了js、css等的引用）就能夠解決全部引入的問題，這節約了頁面加載的耗時。

3.打開命令行工具，不管是在何處打開命令行工具的，你只須要輸入安裝webpack的命令便可把webpack安裝到全局（C:\Users\Andminster\AppData\Roaming\npm目錄下）

//先全局安裝webpack CLI
cnpm i webpack-cli -g //全局安裝表示安裝到C:\Users\Andminster\AppData\Roaming\npm\node_modules目錄下
cnpm i webpack -g 
//卸載全局的webpack
cnpm uninstall -g webpack //能夠用@指定版本號 ,如：cnpm uninstall -g webpack@3

package.json

在你的項目根目錄建立package.json文件。這個文件裏就是你的項目所須要的各類模塊，它配置項目的開發環境。.json的文件裏不能寫註釋，不能使用單引號。

{
    "name": "vue",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",        
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    //簡稱dep，在運行環境下會用到的配置
    "dependencies": {
        "jquery": "^3.4.1", //運行程序依賴於jquery，因此下載jquery時使用的是cnpm i jquery -S，S就是保存到運行環境
        "webpack-cli": "^3.3.2"
    },
    //簡稱dev，在生產環境下要用到的配置
    "devDependencies": {
        "webpack": "^4.31.0", //webpack等打包工具只是用來打包的時候用 ，運行發生在打包以後，因此打包工具放在生產環境裏

　　//cnpm i webpack -D ，D就是保存到生產環境裏。若是不寫-S或-D則默認爲-D
        "webpack-dev-server": "^3.3.1"
    }
}

指令的四種模式

cnpm i xxxmodule 安裝到本地node_modules目錄（即你vue項目目錄，不是全局的C:\Users\Andminster\AppData\Roaming\npm\node_modules目錄）
cnpm i xxxmodule - D 安裝到本地目錄後註冊到package.json的devDependencies（dev）生產環境中，生產環境的程序是用來編譯打包的
cnpm i xxxmodule - S 安裝到本地目錄後註冊到package.json的dependencies(dep)運行環境中，運行環境是用來支持運行時的程序的
cnpm i xxxmodule -g  global（全局安裝），安裝到C:\Users\Andminster\AppData\Roaming\npm，而不是安裝到你的項目目錄

webpack打包指令

//將入口的main.js包轉換爲瀏覽器可識別的出口bundle.js包
webpack .\src\main.js .\dist\bundle.js  
新版命令：webpack .\src\main.js -o .\dist\bundle.js  

webpack手動打包

在vscode中，建立以下目錄和文件

打開終端輸入cnpm指令

1.cnpm init -y 安裝packge.json

2.cnpm i webpack-cli -g 安裝全局的webpack CLI

3.cnpm i webpack -g 安裝全局的webpack

4.接下來在main.js中輸入一段測試代碼，打開瀏覽器測試效果

//在main.js中經過ES6的語法引入jquery包，瀏覽器不識別ES6的語法格式，因此須要用webpack對此文件進行轉換，轉換結果在dist/bundle.js裏

import $ from "jquery"
$(function() {
    alert("hello");
});

//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js，若是你用的最新版本：webpack .\src\main.js -o .\dist\bundle.js

//在index.html中直接引入bundle.js便可
<script src="../dist/bundle.js"></script>

webpack.config.js

如不喜歡每次轉換都提供入口和出口文件路徑，能夠考慮在項目根目錄建立一個webpack.config.js文件，將入口和出口路徑配置在該文件中。這樣，下次打包時只須要輸入webpack便可。

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"/src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"/dist"),
        filename:"bundle.js"
    }
}

webpack-dev-server模塊（自動打包）

在熟悉了webpack安裝及其使用方式後，如今你能夠徹底忽略以上的打包方法。如下介紹的方法是終極絕招，請把上面的方法忘掉，自動打包方法能夠自動監視你對程序的修改且能夠將改動即時反應在瀏覽器上。也即，你不須要手動寫轉換打包的指令，連webpack指令也不須要寫。具體操做以下

1.cnpm init -y 安裝packge.json

2.cnpm i webpack-cli -g 安裝全局的webpack CLI

3.cnpm i webpack -g 安裝全局的webpack

4.cnpm i webpack-cli -D 安裝本地（當前項目）的webpack CLI到生產環境

5.cnpm i webpack -D 安裝本地（當前項目）的webpack到生產環境

6. cnpm i webpack-dev-server -D 安裝本地的webpack-dev-server到生產環境

7.在package.json文件中的scripts屬性中添加一條

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",  
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-cli": "^3.3.2"
  },
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-dev-server": "^3.3.1"
  }
}

8.在當前項目的根目錄建立webpack.config.js，添加如下代碼

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

9.在index.html中引入還未打包的bundle.js，這個文件通過webpack-dev-server自動處理後會生成到內存中，而再也不是dist目錄

<script src="/bundle.js"></script>

10.執行cnpm run dev（終止cnpm run dev：在命令窗口按ctrl+c），輸出如下信息

在瀏覽器輸入http://localhost:8080打開網站點擊src目錄下的index.html文件查看效果。如今你對項目的js文件改動後，webpack-dev-server會當即做出響應並反映在瀏覽器上。

託管站點根目錄

有兩種方式能夠託管站點根目錄，第一種是經過在package.json的scripts中爲dev指定參數來設置託管的根目錄，被託管的目錄會被當作站點根目錄：

"dev": "webpack-dev-server --open"

"dev": "webpack-dev-server --open --port 3000" //自定義端口號

"dev": "webpack-dev-server --open  --contentBase src" //自定義託管的站點根目錄，這會致使cnpm run dev時自動打開託管目錄下默認的index.html

"dev": "webpack-dev-server --open  --hot" //熱重載，每次改動時不會從新生成一個bundle.js，而是將局部修改的代碼反映在已經生成過的bundle.js中，這樣作會使當你改動js代碼後瀏覽器當即刷新（刷新按鈕有反映）纔會呈現改動後的結果，使用hot時只有css不會刷新頁面

第二種方式是經過在webpack.config.js的devServer中指定參數來設置託管的根目錄，被託管的目錄會被當作站點根目錄

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src" //託管的站點根目錄設爲src而再也不是項目根目錄（本例中項目根目錄是vue，src在vue下面）
    }
}

引用node_module目錄下的程序包

無論你託管的目錄是vue（本頁面例子中的根目錄）仍是託管的vue下面的src目錄，在引用經過cnpm指令安裝的程序包（jquery、bootstrap等文件）時，jquery、bootstrap自己是在node-module目錄，若是你的站點根目錄是src，也不用擔憂沒法引入與src同級別的node-module目錄下的文件。也即無論託管哪一個目錄，都是使用如下方式引入node-module目錄下的包，都會去node-module去找，不用手動寫/node-module/bootstrap……

import $ from "jquery" //node-module目錄的文件固定這樣引用
import "bootstrap/dist/css/bootstrap.css" //node-module目錄的文件固定這樣引用

css打包

webpack默認值支持js文件的打包，要打包css須要安裝專門處理css的loader模塊

1.cnpm i style-loader -D 本地安裝style-loader模塊

2.cnpm i css-loader -D 本地安裝css-loader模塊

3.在webpack.config.js中註冊模塊

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src"
    },
    //配置第三方模塊的加載器
    module:{
        rules:[
            {test: /\.css$/,use:['style-loader','css-loader'] } //以css結尾的文件用這倆模塊進行處理

　　　 //當webpack發現使用inport引入css文件時，它會到配置文件中去查找module-rules裏註冊的處理程序

　　    //webpack從右向左調用，先調用css-loader再調用style-loader，數組內的項順序不能改動。           

        ]
    }
}

4.在src目錄建立css目錄，在css目錄建立index.css

#box{
    font-size:150px;
    color:red;
    font-weight:bold;
} 

5.在src目錄的main.js文件中添加如下引入css文件的代碼

import $ from "jquery" //jquery安裝在本地
import "./css/index.css" //其中./表示當前目錄，不能直接寫css/index.css，不然報錯
$(function() {    
    alert("webpack");
});

6.在src目錄的index.html中添加以下代碼

<div id="box">webpack</div>

最後運行cnpm run dev看效果 

處理css文件中的url

#box3{
    background:  url('/img/1.PNG') ;  
    height:200px;
}

webpack不能處理url地址，這些url地址指向了圖片、字體等。這須要安裝url-loader來處理，而url-loader又依賴於file-loader

1.cnpm i file-loader -D

2.cnpm i url-loader -D

3. 注意你的webpack託管的是哪個目錄，如今假設你的圖片路徑爲：vue/src/img/1.png。那麼若是你的託管的根目錄是你的項目根目錄vue，則你在css文件中的url爲：/src/img/1.png。若是你把src設爲站點根目錄，好比你把在webpack.config.js文件中的devServer屬性的contentBase設src爲託管目錄，而你的項目根目錄原本是vue，那麼你在css文件中設置的url爲：img/1.png

在webpack.config.js註冊url-loader

module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
    ]
}

url-loader默認不會把圖片生成爲base64的編碼，但base64編碼有利於網絡傳輸，通常狀況下應該將小圖片轉換爲base64，大圖不適用。可經過配置module的rules來實現自動識別小圖並轉換

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader?limit=2742' } <2742字節會被轉換，經測試無效，緣由不明

處理字體圖標

好比bootstrap、阿里的iconfont等就有不少字體圖標，須要設置過濾規則，用url-loader進行處理

{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

打包less

與css是同樣的設置方式，先在src-css目錄建立index.less文件

#box2{
    p{
        font-size:50px;
        background: "#000";
        color:red;
    }
}

在main.js引入less

import "./css/index.less"

在webpack.config.js註冊less-loader

//配置第三方模塊的加載器
module:{
    rules:[
        {test: /\.css$/,use:['style-loader','css-loader'] }, 
        {test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less結尾的文件用這兩模塊進行處理
    ]
}

cnpm i less -D 本地安裝less，less-loader模塊依賴於less模塊

cnpm i less-loader -D 本地安裝less-loader模塊

打包sass

第一種方法

npm i -global node-gyp
npm i -global -production windows-build-tools
cnpm i node-sass -D
cnpm i sass-loader -D

其中node-gyp和production windows-build-tools須要用管理員身份運行powershell，因爲這兩個工具包都是全局安裝，因此隨便在哪一個位置打開powershell均可以，使用npm安裝這兩個工具，安裝完成後，再shift加右鍵項目目錄打開powershell安裝node-sass和sass-loader。若是以前沒有安裝gyp和windows構建工具致使失敗，必定要先卸載sass相關包，再按本方法從新安裝。

第二種方法（沒試過，不肯定可行與否）

npm i --save node-sass --registry=https: //registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
npm sass-loader -d

配置第三方模塊的加載器

module:{
    rules:[
        {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

全局引入scss（vue-cil + webpack適用）

若是你不但願在.vue組件文件中導入scss（由於每個組件文件可能都須要用到某個全局的scss文件，這樣導入會下降效率，並且組件文件也有深度層級，這樣每一個組件文件都導入某個全局的scss文件就得琢磨路徑問題，超麻煩。但若是你不把某個全局的scss文件導入到當前.vue組件文件中，則沒法使用全局scss文件中的變量）。這個問題靠安裝sass-resources-loader來解決。注意如下各類支持sass的包須要同時保存到生產環境和運行環境

cnpm i node-sass -S -D
cnpm i sass-loader -S -D
cnpm i style-loader -S -D

cnpm i sass-resources-loader -S -D

打開build/webpack.base.conf.js，添加scss處理程序（loader）

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
},

打開build/utils.js，找到scss一行

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

替換爲

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders( 'sass' ).concat(
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve( __dirname, '../src/assets/css/global.scss' )
      }
    }
  ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

resources指定了你的全局scss的路徑：css/global.scss，你須要在../src/assets目錄中建立一個css目錄，在css目錄建立一個global.scss文件做爲全局scss文件

而後在global.scss中定義一個變量

$bgcolor:#ff6a00;

如今你能夠在任何一個.vue組件文件中的style標籤里加入lang="scss"，接着就可使用全局變量了。

<style scoped lang="scss">

h1, h2 {   

  font-weight: normal;   

  background:$bgcolor;

}

</style>

打包js文件

webpack只支持一些不算過高級的ES6語法，要完整支持ES6高級語法，須要安裝babel-loader，有babel-loader是一個js高級語法編譯器，它處理以後會自動交給webpack打包到bundle.js

1.cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D 

2.cnpm i babel-preset-env babel-preset-stage-0 -D

注：babel-loader必須是7.1.5，其它版本裝了報錯。

在webpack.config.js註冊babel-loader

module: {
        rules: [          
            { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude設置被babel-loader編譯所排除的目錄，若是這個目錄被轉換，耗時很長並且不能成功運行
        ]
 }

在項目根目錄（與package.json同級）建立一個.babelrc的json文件（注：文件名起始處帶.號，不帶json後綴名）用於註冊babel-loader所使用的插件和語法

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

在main.js中寫測試代碼

class Person{
    static personCount=100;
}

alert(Person.personCount);

import時的路徑提示工具

安裝擴展工具：Path Intellisense後，在設置種打開json配置輸入如下紅色部分的代碼

{
    "editor.renderLineHighlight": "gutter",
    "editor.mouseWheelZoom": true,
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }    
}

在項目根目錄下建立jsconfig.json，該文件與package.json同級

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

安裝vue-cil

vue-cil自帶完整的目錄結構，先裝package.json、再裝webpack-cil、webpack，最後安裝vue-cil

1.npm install --global vue-cli

2.安裝好後，在C:\Users\Andminster\AppData\Roaming\npm下的node_modules目錄下會看到vue-cil

3.建立一個目錄，shift右鍵該目錄打開命令行工具，輸入：vue init webpack 你準備建立的項目名稱（不能有大寫字母），接下來會彈出一些提示如圖所示，一路回車或yes or no以後，vue-cil會自動爲你在你建立的目錄下面建立一個完整的vue項目目錄。

若是是在visual studio中使用vue項目，因爲vue-cil已經完整建立了項目結構，因此只須要在vs中：文件-打開-網站，選擇你的項目目錄便可把項目載入到vs中

 

自動打開網站

打開package.json文件，爲webpack-dev-server增長：--open --hot。

運行

一切就緒以後，關掉命令行工具，再shift右擊項目目錄（是vue-cil自動建立的，不是你手動建立的目錄）運行npm run dev，由於安裝vue-cil是在項目目錄的上級目錄開始的，此時不退出你運行vue項目，會提示找不到文件。

cannot get

若是打開網站後提示cannot get，多是沒有安裝sass處理包，sass安裝參考：全局引入scss（vue-cil + webpack適用）

webpack.base.conf.js

此文件就是配置處理各類文件的loader的地方。 默認狀況下不須要改動。

關閉瀏覽器控制檯eslint對錯誤的提示

打開config目錄下的index.js，將useEslint設爲false 

vue.config.js

這個文件位於與package.json相同的目錄，默認沒有建立，你能夠自行建立，它會在終端運行 vue-cli-service 時，先找到vue.config.js，獲取到你的相關配置，才繼續執行其它操做，具體配置結構以下，可直接複製粘貼到vue.config.js中。

module.exports = {
  // 部署應用包時的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? '//your_url'
    : '/',

  // 運行 vue-cli-service build 時生成的生產環境構建文件的目錄
  // 默認構建前清除文件夾(構建時傳入 --no-clean 可關閉該行爲
  outputDir: 'dist',

  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  assetsDir: 'static',

  // 指定生成的 index.html 的輸出路徑 (相對於 outputDir),也能夠是一個絕對路徑
  indexPath: 'index.html',

  // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
  filenameHashing: true,

  // 當在 multi-page 模式下構建時，webpack 配置會包含不同的插件
  // (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。
  // 若是你試圖修改這些插件的選項，請確認運行 vue inspect
  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/index.js',
      // 模板來源
      template: 'src/pages/index/index.html',
      // 在 dist 的輸出爲 index.html
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首頁',
      // 在這個頁面中包含的塊，默認狀況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 而且若是找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導爲 `subpage.html`。

    // 多入口時，接着寫子頁面
    //subpage: 'src/subpage/main.js'
  },

  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,

  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,

  // 默認狀況下 babel-loader 忽略其中的全部文件 node_modules，
  // 想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來
  transpileDependencies: [],

  // 生產環境 sourceMap
  productionSourceMap: false,

  // 跨域設置 
  // 可取值參考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
  crossorigin: undefined,

  // 構建後的文件是部署在 CDN 上的，啓用該選項能夠提供額外的安全性, 默認false
  integrity: false,

  // webpack 配置，鍵值對象時會合並配置，爲方法時會改寫配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //configureWebpack: (config) => {},

  // webpack 連接 API，用於生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: ( config ) => {
    // 由於是多頁面，因此取消 chunks，每一個頁面只對應一個單獨的 JS / CSS
    config.optimization
      .splitChunks( {
        cacheGroups: {}
      } );

    // 'src/lib' 目錄下爲外部庫文件，不參與 eslint 檢測
    config.module
      .rule( 'eslint' )
      .exclude
      .add( '/Users/maybexia/Downloads/FE/community_built-in/src/lib' )
      .end()
  },

  // 配置高於chainWebpack中關於 css loader 的配置
  css: {
    // false 時只有 *.module.[ext] 結尾的文件纔會被視做 CSS Modules 模塊
    // true 時能夠去掉文件名中的 .module， 並將全部的 *.(css|scss|sass|less|styl(us)?) 文件視爲 CSS Modules 模塊
    modules: false,

    // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中
    // 生產環境下是 true，開發環境下是 false  
    extract: true,

    // 是否構建樣式地圖，設置爲 true 以後可能會影響構建的性能
    sourceMap: false,

    // css預設器配置項
    loaderOptions: {
      css: {
        // 這裏的選項會傳遞給 css-loader
      },

      postcss: {
        // 這裏的選項會傳遞給 postcss-loader
      }
    }
  },

  // 全部 webpack-dev-server 的選項都支持
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3000,

    https: false,

    hotOnly: false,

    // 將任何未知請求 (沒有匹配到靜態文件的請求) 代理到該字段指向的地方 
    proxy: null,

    before: app => {
    }
  },
  // 構建時開啓多進程處理 babel 編譯
  // 是否爲 Babel 或 TypeScript 使用 thread-loader
  parallel: require( 'os' ).cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};

vue.config.js

關於vue-cil其它參考：Vue2全家桶之一：vue-cli（vue腳手架）超詳細教程

經常使用指令

cls //清除控制檯信息
ctrl + c //終止控制檯程序的執行
cnpm info 包名//查看遠程包的版本號
vue 包名 -V //查看本地包版本號
cnpm uninstall 包名 //卸載包

其它

*處理工具xxx-loder在webpack1.0版本不須要後綴loader

* 若是項目運行失敗的錯誤是端口號問題，多是端口號被佔用，關閉vscode從新打開或打開windows資源管理器，結束進程便可

 

Javascript - 學習總目錄