總結Vue第三天：模組化和webpack模組化打包：

一、❀ 模組化 [匯入import-----匯出export]

1、為什麼需要模組化？

JavaScript 發展初期，程式碼簡單地堆積在一起，只要能順利地從上往下一次執行即可。但隨著網站越來越複雜，造成了很多問題：全域性變數衝突、函式命名衝突、引入js檔案順序等等

2、模組化規範：

（1）模組化規範：CommonJS、AMD、CMD，還有ES6的Modules。

（2）CommonJS 匯出 module.exports = 匯出{什麼東西} 匯入 require(什麼東西)

（3）ES6的Modules：匯出 ---à模組化，引入type=”module”----

●export {什麼東西}, 可以定義的時候直接export ，也可以最後放在一個物件裡一起export

●import {什麼東西} from 哪裡，通過一個物件（有匯出對應的變數、函式名等等）import，也可以通過一個 * as取別名 全部匯入。

二、webpack模組化打包：

■ webpack目錄：

（1）webpack是什麼？

（2）webpack的安裝

（3）webpack目錄結構

（4）webpack模組打包js的配置

（5）loader的使用

（6）webapck中配置Vue 和Vue 元件化開發引入

（7）plugin的使用

（8）搭建本地伺服器

（9）將開發與生產時需要的配置的分離：

1、webpack是什麼？

■ JavaScript應用的靜態模組打包工具。

■ webpack更加強調模組化開發管理，而檔案壓縮合並、預處理等功能，是他附帶的功能。

2、 webpack的安裝：

• webpack 正常執行是依賴node環境，node 需要安裝管理工具npm，使用NPM來安裝一些開發過程中依賴包.

（1）安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm。【安裝nodejs：

https://www.cnblogs.com/shan333/p/15726428.html 】

（2）檢視自己的node版本，判斷是否安裝成功：

  node -v

（3）安裝全域性的webpack(這裡我先指定版本號3.6.0，因為vue cli2依賴該版本)：

npm install [email protected] -g

//常看是否安裝成功：
webpack -v

（4）區域性安裝webpack【每個專案使用的webpack版本可能不同】（--save-dev是開發時依賴，專案打包後不需要繼續使用）

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

3、webpack專案結構

▷ src 原始碼檔案（主要是js、css等等）

▷ dist 打包檔案

▷ package.json npm包管理的檔案（通過npm init 生成，方便後邊使用node的屬性、方法等）

▷ html檔案

4、webpack模組打包js的配置 （webpack的核心功能）

（1）打包指令：webpack 入口路徑 出口路徑

例如： webpack ./src/main.js ./dist/bundle.js 

使用：html引入打包後的js檔案：

<script type="text/javascript" src="dist/bundle.js"></script>

每次使用webpack的命令都需要寫上入口和出口作為引數，就非常麻煩

（2）簡化一下打包指令為： webpack

1）自己建立一個webpack.config.js檔案，通過webpack.config.js配置檔案封裝入口、出口路徑

2）模組化匯出入口和出口：

（3）通過指令碼設定打包命令，實現通過指令碼區域性打包（針對當前專案）使用指令 npm run build 代替 webpack指令實現打包（在package.json 中新增：）

"scripts": {
  "build": "webpack"
},

5、loader的使用 （webpack的擴充套件功能，需要安裝loader）

~~~~~~~~~~~安裝和在webpack.config.js檔案進行配置。

□ 不安裝擴充套件器，webpack只能模組化打包js檔案

□ css、圖片，將ES6轉成ES5程式碼，將TypeScript轉成ES5程式碼，將scss、less轉成css，將.jsx、.vue檔案轉成js檔案等也是需要模組化打包。

（1）模組化打包css、less、圖片，將ES6 語法轉化成ES5，將.vue轉化成 .js

■ loader使用過程：

步驟一：通過npm安裝需要使用的loader

步驟二：在webpack.config.js中的modules關鍵字下進行配置

注意：去webpack官網找安裝命令和配置程式碼

● css 安裝：css-loader 和 style-loader

● less 安裝：less-loader

● 圖片安裝：url-loader

● ES6 轉成ES5 安裝：babel-loader

● .vue 檔案轉化成 .js 檔案安裝：vue-loader 和 vue-template-compiler

6、 webapck中配置Vue和Vue元件化開發引入：

（1）webpack模組化vue~引入vue.js

步驟一：通過npm安裝Vue ： npm install vue --save

步驟二：在webpack.config.js中新增上 resolve（Vue runtime-compiler版本）

注意：去vue官網找安裝命令和配置程式碼

（2）Vue元件化開發引入：

1） 需要安裝：安裝vue-loader、 vue-template-compiler和修改webpack.config.js的配置檔案

2）Vue元件化開發引入的好處：

對比cpn元件(js檔案)和cpn元件（Vue檔案），顯然Vue檔案的結構更加清晰

3）程式碼對比：

① js檔案的Vue元件【可以看到模板template，屬於html的，跟Vue（js）混在一起】

//將模板以預設（匿名）物件的方式匯出
export default{
  template: `
    <div>
    <button @click="btnClick">點w</button>
    <input type="text" />
    <h1>{{message}}</h1>
    </div>
  `,
  data(){
    return {
      message: '配置Vue啦~'
    }
  },
  methods: {
    btnClick(){
      console.log('感謝你點我哈~');
    }
  }
}

② Vue檔案的Vue元件【html、css、js程式碼分離，結構清晰】

<template>
  <div>
    <button class="btnColor" @click="btnClick">小兒子</button>
    <h5>{{message}}</h5>
  </div>
</template>

<script>
export default {
  name: "cpn",
  data(){
    return {
      message: '配置Vue啦~'
    }
  },
  methods: {
    btnClick(){
      console.log('感謝你點我哈~');
    }
  }
}
</script>

<style scoped>
.btnColor{
  background-color: greenyellow;
}
</style>

7、plugin的使用

（1）loader和plugin區別：

■ loader主要用於轉換某些型別的模組，它是一個轉換器。

■ plugin是外掛，它是對webpack本身的擴充套件，是一個擴充套件器。

（2）plugin的使用過程：

步驟一：通過npm安裝需要使用的plugins (某些webpack已經內建的外掛不需要安裝)

步驟二：在webpack.config.js中的plugins中配置外掛。

（3）各種外掛介紹：

●webpack的外掛~版權外掛BannerPlugin （屬於webpack自帶的外掛）

要使用到webpack物件，記得先匯入，然後new webpack.BannerPlugin( );

●webpack的外掛~打包html外掛 HtmlWebpackPlugin外掛

安裝：html-webpack-plugin

要使用到HtmlWebpackPlugin物件，記得先匯入，然後new HtmlWebpackPlugin (傳入一個物件，引數有template );

□ 這裡的template表示根據什麼模板來生成index.html。

□ 注意：HtmlWebpackPlugin 外掛，會自動生成script

● js程式碼的壓縮外掛~uglifyjs-webpack-plugin （專案要釋出時才需要）

安裝：uglifyjs-webpack-plugin

要使用到UglifyjsWebpackPlugin物件，記得先匯入，然後new UglifyjsWebpackPlugin( )

8、搭建本地伺服器

（1）webpack提供了一個可以選的本地開發伺服器，基於node.js 搭建，（內部使用express），可以實現我們想要的效果：讓瀏覽器自動重新整理顯示我們修改後的結果。

（2）搭建本地伺服器步驟：

步驟一：通過npm安裝開發伺服器webpack-dev-server

步驟二：在webpack.config.js中的devserver中配置屬性：

• contentBase：為哪一個資料夾提供本地服務，預設是根資料夾，我們這裡要填寫./dist

• inline：頁面實時重新整理

9、將開發與生產時需要的配置的分離：

● 開發和生產都需要的配置放到 base.config.js檔案

● 開發需要的配置放到 dev.config.js檔案

● 生產需要的配置放到 prod.config.js檔案

安裝合併的工具：webpackMerge~~~ webpack-merge

然後，合併dev.config.js檔案的程式碼與base.config.js 檔案的程式碼，和合並 prod.config.js 檔案的程式碼與base.config.js 檔案的程式碼

□