官網
vue超詳細講解（一）

node

Node.js? 是一個基于 Chrome V8 引擎 的 JavaScript 運行時環境，
作為一個異步事件驅動的 JavaScript 運行時，Node.js 被設計用來構建可擴展的網路應用，

npm

npm init

這條指令是用來初始化專案的，運行-一通回車之后專案會生成package.json檔案，該檔案中放了專案的相關資訊，例如專案名稱、版本號、腳本、作者以及依賴的包，

npm install

該命令是用來下載npm所管理的包的，如果指令或專案沒有指定下什么包就不會下載，不管有沒有下載都會在專案中生成一個package-lock.json檔案，其中存放著專案導包的相關資訊，

在專案開發中，我們一般在創建專案后使用這兩條指令，用于初始化專案，

webpack的使用安裝

作用

從本質上來講，webpack是一個現代的JavaScript應用的靜態模塊打包工具，
他是幫助我們打包前端專案的，

下載

• 安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm，沒有的去官網下載一下
• 查看自己的node版本:

node -v

• 全域安裝webpack(這里我先指定版本號3.6.0，因為vue cli2依賴該版本)

npm install webpack@3.6.0 -g

• 區域安裝webpack(后續才需要)
  • save-dev 是開發是依賴，專案打包后不需要繼續使用的，

cd 對應目錄
npm install webpack@3.6.0 --asve-dev

使用程序

呼叫命令: webpack 需要打包的js檔案路徑 打包之后的js檔案路徑

webpack ./src/main.js ./dist/bundle.js

如果你報了一下錯誤,請點這里解決問題

webpack : 無法加載檔案 C:\Users\AppData\Roaming\npm\webpack.ps1，因為在此系統上禁止運行腳本

呼叫命令后webpack會幫你除了各種模塊之間的依賴，在html頁面中只需匯入打包后的js檔案即可

webpack簡便用法

我們在使用webpack時打包就需要敲一下代碼，很麻煩
webpack ./src/main.js ./dist/bundle.js
在專案中創建webpack.config.js檔案，webpack會掃描該包，
在這個檔案中我們可以制定webpack把哪個檔案打包到哪個檔案中，

 const path = require("path")//node中的物件
 module.exports = {
  entry: "./src/main.js", //要打包的js檔案
  output: {
  //打包生成檔案的路徑
    path : path.resolve(__dirname, "dist"), //__dirname為node中的全域變數,直接用就行,path的resolve方法可以幫助我們連接字串
    //打包生成檔案名
    filename: "bundle.js"
  }
 }

使用node運行webpack命令

我們之前說過:package.json檔案中存放著腳本，
我們可以在packag.json檔案中寫入腳本，通過運行腳本來運行webpack，執行打包操作

在終端中通過 npm run 腳本名的方式來打包,使用這種方法會優先本專案的webpack，

npm run build

區域安裝webpack并設定為開發版，運行版不使用

npm install webpack@3.6.0 --save-dev

webpack的loader

webpack打包css檔案

webpack可以幫我們將css檔案像js檔案那樣打包到一個js檔案中，非~~~常好用，
css-loader是幫我們決議css檔案的，style-loader是幫我們把樣式渲染到頁面上的，

1. 使用npm下載css-loader以及style-loader：如果版本不兼容請看這里
2. 在主js檔案中引入需要使用的css檔案

require("./css/normal.css")

3.把以下代碼放到webpack.config.js中

 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],//css-loader在前，style-loader在后
      },
    ],
  },

完整代碼

 const path = require("path")
 module.exports = {
  entry: "./src/main.js",
  output: {
    path : path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
     rules: [
       {
         test: /\.css$/i,
         use: ["style-loader", "css-loader"],
       },
     ],
   },
 }

webpack打包less檔案

和打包css檔案相同，同樣是三部：

1. 下載less-loader和less ：
   npm install less less-loader --save-dev
2. 引入寫好的less
   require("./css/special.less")
3. 撰寫組態檔

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

webpack打包圖片

在css、js中我們可能會使用圖片，css-loader是處理不了圖片的，我們需要下載file-loader以及url-loader才行

1. 下載
   npm install url-loader --save-dev
npm install file-loader --save-dev
2. 配置

module.exports = {
  module: {
    rules: [
      {
      	test: /\.(png|jpg|gif|jpeg)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
               //當圖片大小小于limit(KB)時，url-loader會將圖片轉為base64存到js中
               //當圖片大小大于limit(KB)時，圖片需要file-loader處理,存到打包的那個檔案夾中
               limit: 8192,
               //指定生成圖片檔案的名稱即路徑：image為檔案夾，[name]為原本檔案的名稱，[hash:8]為8位hash值，[ext]為擴展名
               name: 'image/[name]-[hash:8].[ext]'
             },
           },
         ],
      },
    ],
  },
};

生成后的圖片

webpack打包后的檔案轉成es5的

1. 下載loader
   npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2. 配置

{
 test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      //轉es5
      presets: ['es2015']
    }
  }
}

配置完之后再打包你就會發現生成的js檔案使用的是es5的語法，搜const根本搜不到

webpack打包vue

1. 首先要使用npm安裝vue
   npm install vue --save
2. 在js檔案中匯入vue
   import Vue from 'vue';
3. 配置webpack.config.js，使用開發時vue，而不是運行時vue

 module.exports = {
  resolve: {
    //alias: 別名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
 }

默認使用的vue是rutime-only,上面的配置是為了把他修改成runtime-compiler

創建Vue時template與el的關系

在創建vue時，我們需要在掛載的元素內寫我們需要的標簽，其實也可以在創建vue物件時賦予template屬性，在template中添加頁面內容，vue會幫我們吧template中的內容替換我們掛載的元素

• 掛載的元素

<div id="app">
</div>

• 創建vue

const app = new Vue({
  el: "#app",
  template: `
    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">點我</button>
    </div>
  `,
  data: {
    message: "hello webpack"
  },
  methods: {
    btnClick(){
      console.log("我被點擊了");
    }
  }
})

創建Vue的終極使用方案

第一種方案

其實我們可以把根組件也封裝成一個組件,然后使用該組件即可

• html

<div id="app">
</div>

• js

const App = {
  template: `    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">點我</button>
    </div>`,
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被點擊了");
    }
  }
}
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})

第二種方案

我們使用模塊化的思想，把我們剛剛封裝好的組件分離出來，創建一個js檔案，使用的時候參考該檔案

• js檔案

const app = {
  template: `    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">點我</button>
    </div>`,
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被點擊了");
    }
  }
}
//匯出vue組件
export default app

• 引入并使用該組件

import App from "./js/app.js"
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})

第三種方案

使用.vue檔案獨立封裝組件，該檔案也是需要引入的
由于該檔案不能被webpack打包，我們需要下載新的loader,并且配置引數,配置在下面
npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev
vue-loader是打包.vue檔案的，vue-template-compiler是用于組件編譯的
vue-loader建議使用13的版本

• app.vue檔案

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">點我</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被點擊了");
    }
  }
}
</script>

<style scoped>

</style>

• 參考并使用

import App from './js/app.vue'
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})

• 配置webpack.config.js

{
  test: /\.vue$/,
  use: ["vue-loader"]
}

resolve: {
	//配置該屬性時，我們在參考檔案時可以不用寫后綴名
    extensions: ['.js', '.css', '.vue'],
    //alias: 別名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

webpack的plugin(插件)

添加著作權的plugin

按照下面的方式來修改webpack.config.js檔案

const path = require("path")
const webpack = require("webpack")
module.exports = {
	...
	plugins: [
		new webpack.BannerPlugin('最終著作權歸bianys所有')
	] 
}

重新打包程式：查看bundle.js檔案的頭部,看到如下資訊

打包生成html檔案的plugin

該插件會在webpack打包時會在打包檔案自動生成index.html檔案,非常好用
該插件不是webpack自帶的，需要自己下載

npm install html-webpack-plugin --save-dev

按照下面的方式來修改webpack.config.js檔案

const path = require("path")
const webpack = require("webpack")
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	...
	plugins: [
		new webpack.BannerPlugin('最終著作權歸bianys所有'),
		new htmlWebpackPlugin({})
	] 
}

生成的html檔案是沒有<div id = "app"></div>的
我們需要給他指定一個模板，就用我們之前的index.html就行，這樣配置

plugins: [
	new webpack.BannerPlugin('最終著作權歸bianys所有'),
	new htmlWebpackPlugin({
      template: 'index.html'
    })
]

• 生成之后的檔案
  

壓縮js的plugin

我們生成的js注釋是比較多的，這樣方便程式員查看，但在專案運行時注釋和一些格式會影響代碼的執行效率，因此我們需要壓縮一下js代碼，
下載第三方插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
按照下面的方式來修改webpack.config.js檔案

const path = require("path")
const webpack = require("webpack")
const htmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	...
	plugins: [
		new uglifyjsPlugin()
	] 
}

• 我們可以看到壓縮后的js檔案
  

webpack其他知識

webpack-dev-server搭建本地服務器

我們在開發/除錯時，需要頻繁的打包代碼，而打包代碼的運行是需要很多時間的，這降低了開發區效率，
我們可以讓node幫我的提供一個服務器，它會自動檢測代碼的變化從而自動在記憶體中打包，當我們除錯完代碼之后再打包，這樣提高了開發效率，

1. 下載webpack-dev-server工具

npm install --save-dev webpack-dev-server@2.9.1
2. 在webpack.config.js中配置相關引數

 module.exports = {
  ...
  devServer: {
    contentBase: './dist',
    inline: true,
    port: 8083
  }
 }

啟動需要用到webpack-dev-server指令，由于我們只在本專案中下載了該組件，在全域并沒有下載，因此我們只能借助npm幫我們啟動

3. 在package.json中修改以下代碼

  "scripts": {
  	...
    "dev": "webpack-dev-server --open"//添加open是為了讓他運行時自動打開網頁
  },

4. 啟動
   npm run dev

我們可以看到修改代碼后，專案會自動更新，

webpack組態檔的分離

我們在壓縮js和搭建本地服務器的時候就會發現壓縮js在開發時根本不需要，搭建服務器也只是生產環境才會使用，我們可以撰寫兩套webpack.config.js檔案分別適配開發和生產環境，

1. 創建一下目錄
   base里寫公共的配置，dev里寫開發配置，prod里寫生產配置
   
2. 下載webpack-merge用于結合兩個配置
   npm install --save-dev webpack-merge
3. 在dev與prod中都參考base.config.js
   1. dev

   const webpack = require("webpack")
   //參考webpackMerge
   const webpackMerge = require("webpack-merge")
   const baseConfigJs = require("./base.config")
   //使用webpackMerge結合base與dev的配置
   module.exports = webpackMerge.merge(baseConfigJs, {
     plugins: [
       new webpack.BannerPlugin('最終著作權歸bianys所有'),
     ],
     devServer: {
       contentBase: './dist',
       inline: true,
     }
   })
   

   2. prod

   const webpackMerge = require("webpack-merge")
   const baseConfigJs = require("./base.config")
   const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
   module.exports = webpackMerge.merge(baseConfigJs, {
     plugins: [
       new uglifyjsPlugin()
     ],
   })
   

之前webpack都是默認在根目錄下找webpack.config檔案，現在我們用三個檔案替換了他，因此他就不需要了，我們需要指定我們使用的組態檔，也就是build檔案架下的dev.config.js與prod.config.js

4. 修改package.json檔案

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

由于我們修改了組態檔件的位置，那么打包檔案生成的位置也會改變，我們如果還想讓他在原來的位置生成就需要修改，
把"./dist"改為"…/dist"

5. 修改打包檔案生成位置
   
6. 運行/打包專案

#dev
npm run dev
#prod
npm run build