webpack學習

一、認識webpack

webpack和node、npm的關係

二、webpack安裝

要先安裝node
全域性安裝webpack：npm install webpack@3.6.0 -g
區域性安裝（之後再用）：npm install webpack@3.6.0 --save-dev
為什麼全域性安裝之後，還需要區域性安裝呢？

• 在終端直接執行webpack命令，使用的是全域性安裝的webpack
• 在package.json中定義了scripts時，其中包含了webpack命令，那麼使用的是區域性webpack

三、webpack的基本使用

1. js模組化

使用命令：webpack ./src/main.js ./dist/bundle.js進行打包
注意：如果在webpack.config.js中定義了入口出口，就可以直接使用webpack命令執行上述功能

並在index.html中引入bundle.js檔案即可。

注意
在終端輸入的webpack都是使用的是全域性安裝的webpack，但是在專案開發中，我們需要在本地下載一個webpack，方便專案的進行，多人開發時也不依賴錯誤的webpack版本，因此一般使用原生的webpack。
安裝：

• npm init：使用node前最好要先有一個package.json檔案記錄依賴
• npm install webpack@3.6.0 --save-dev：安裝本地webpack依賴，–save-dev表示開發依賴，放在devDependencies中
• 這時候，在scripts中寫命令簡寫可以方便我們執行，例如可以使用npm run builld 來代替webpack命令。這樣做還有一個好處，就是當我們執行npm run build 時，優先執行本地安裝的webpack，而不是全域性的，避免打包時因為依賴發生錯誤
  

2. css模組化

需求：對css進行模組化，在index.html檔案中不引入css檔案，只有main.js一個入口時，在main.js檔案中先引入css檔案，然後下載相應loader，然後在webpack.config.js的modules下設定loader

配合檔案查詢使用：webpack中文檔案

步驟：

• 引入css
  

• 下載loader
  npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1

• 設定loader
  

• 執行：npm run build
  此時，開啟index.html檔案可以看到normal.css中編寫的樣式生效了

3. 處理less檔案

步驟：

• 引入less
  

• 下載loader
  npm install --save-dev less-loader@4.1.0 less

• 設定loader
  

• 執行：npm run build
  此時，開啟index.html檔案可以看到special.less中編寫的樣式生效了
  反正我是報錯了，可能與版本有關，之後有機會再解決這個問題

4. 處理圖片檔案

步驟：

• 引入圖片檔案
  

• 下載loader
  npm install --save-dev url-loader

• 設定loader
  從官方檔案複製就好
  
  8kb的limit是8192
  當載入的圖片小於limit時，會將圖片編譯成base64字串形式，原圖片是不會打包進dist裡面的。
  當圖片大於limit時，需要使用file-loader模組進行載入：npm install --save-dev file-loader
  這時候圖片會被打包進dist裡面，要注意修改檔案路徑，還要注意對圖片的命名
  
  

• 執行：npm run build

5. ES6語法處理

將es6語法轉成es5，需要babel-loader，使用步驟同前（還要babel-core babel-preset-env）

• 下載：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

• 設定：
  

• 執行：npm run build，bundle.js中都是es5語法

四、webpack中設定Vue

1. 引入vue.js

安裝vue的三種方式：

1. 直接下載應用
2. CDN引入
3. npm安裝，這裡要講的
   步驟：

• 下載Vue：npm install vue --save，執行時依賴
• 引入Vue：import Vue from 'vue'，它會在node-modules中查詢的，然後就可以正常使用
• 打包：npm run build，這時會報錯說是runtime-only版本不能使用template，解決：
  
  預設使用vue.runtime.js，現在指定vue.esm.js，使用runtime-compiler版本

注意：Vue有兩種版本：
runtime-only：程式碼中不可以使用template
runtime-compiler：可以有template，因為有compiler可以用於編譯template

2. el和template的區別

使用template之後會在編譯時把原來的<div id="app"></div>替換成template當中的內容，而template當中的寫法又可以再抽成一個元件單獨寫（抽到另一個.vue檔案中）

3. 處理.vue檔案

組織一個元件，使用.vue檔案封裝，在裡面可以直接寫結構樣式資料等。一個.vue也可以參照另外的元件，通過import Cpn from './Cpn.vue'

下載：npm install --save-dev vue-loader vue-template-compiler
注意這裡vue-loader版本大於13可能會要外掛plugin
設定：

五、plugin使用

1. loader和plugin的區別：

• loader主要用於轉換某些型別的模組，他是一個轉換器
• plugin是外掛，它是對webpack本身的擴充套件，是一個擴充套件器

2. plugin的使用

• 通過npm安裝需要使用的plugins（某些webpack已經內建的外掛不需要安裝）
• 在webpack.config.js中的plugins中設定外掛

3. 新增版權的plugin

這是內建的外掛，只需要引入webpack就可以

4. 打包html的plugin

5. js壓縮的plugin

**注意：**開發階段不需要進行js的壓縮（醜化），在釋出時才需要

六、搭建本地伺服器

執行時輸入：webpack-dev-server，可以在指令碼中設定簡寫方式："dev": "webpack-dev-server"，然後通過npm run dev來執行

注意：這個只需要在開發階段進行設定，釋出時是不需要的

七、webpack.config.js的分離

對於webpack.config.js，我們可以把開發依賴和釋出（生產）依賴分離開來，首先把所有公共依賴抽離到base.config.js中，然後單獨的開發依賴放入dev.config.js中，單獨的生產依賴放入prod.config.js中，然後再合併。
要下載：npm install webpack-merge --save -dev，然後merge


然後在package.json中重新設定