從零開始搭建webpack應用

熊也抱抱發表於2018-03-25
Web

最近研究webpack配置神煩，打包工具指不定哪天又要被取代。要想自己手動搭一個複雜應用的webpack腳手架不是一件容易的事, 看看vue-cli的webpack配置檔案就有8+個，使用的外掛有14+個，程式碼800行＋。還沒開始寫程式碼就要搞懂這麼多“規則”，還不如多花點時間研究js核心，哪天可以自己倒騰工具。為了重複踩坑，還是記錄下來適應這些規則的過程，通常工具文件通常不會涵蓋這些內容。不做工具構建工程師，但要利用工具。

一、環境準備(作者是windows環境)

1.1. 安裝node

安裝node，前往官網，node自帶npm。安裝完成開啟cmd輸入下面的指令檢查是否安裝成功：

node -v
npm -v
複製程式碼

error1 ：node 指令沒反應

解決：刪除npm目錄中的npmrc檔案。

1.2. 初始化專案

執行npm init 根據提示初始化一個專案，生成package.json檔案

注意：專案根目錄的資料夾名稱不能使用空格，否則專案會報錯。

error1 ：npm 指令沒反應

解決：刪除npm目錄中的npmrc檔案。

error2 : 全域性安裝報錯：沒有許可權

解決： 注意把nodePATH改在有許可權的地方，否則後續使用命令列全域性安裝包可能會有許可權問題。

  • 檢視全域性安裝預設路徑： npm config get prefix
  • 修改全域性安裝預設路徑：

npm config set prefix 'C:\Users\Administrator\node\node_global' (資料夾自己建好，確保路徑有許可權)

npm config set cache 'C:\Users\Administrator\node\node_global' (資料夾自己建好，確保路徑有許可權)

  • 再次檢視全域性安裝預設路徑
  • 修改環境變數
    • 使用者變數- NODE PATH 和 PATH中新增： C:\Users\Administrator\node\node_global
    • 系統變數- PATH中新增： C:\Users\Administrator\node\node_global
  • 重啟cmd, path才會生效

error3 ：unexpected token ｛ ｝in json at position 403

解決：刪除pakage.json.lock檔案。

二、包的管理

2.1. 安裝yarn

建議安裝yarn利於版本控制，安裝 yarn官方文件。安裝使用指令：

yarn init  // 初始化專案，生成yarn.lock檔案
yarn add [pakeage] --dev // --dev 只在開發環境下使用的外掛
yarn (install) // 安裝lock檔案中所有的依賴
複製程式碼

error1 : 安裝了yarn, 執行yarn install報錯無法使用！

解決：把yarn安裝資料夾下的bin資料夾加到環境變數。

2.2. 安裝cnpm，npm國內映象 (可選)

npm install -g cnpm --registry=https://registry.npm.taobao.org

三、腳手架搭建

3.1 vue-cli 腳手架迅速搭建

  • 全域性安裝：npm install -g vue-cli;
  • 檢視是否安裝成功：vue -V;
  • 初始化專案：vue init webpack my-project;
  • 不要用night watch,裡面的demo依賴google的資源，國內無法使用，啟動專案會報錯, 官網說明:The test below navigates to google.com and searches for "rembrandt van rijn", then verifies if the term first result is the Wikipedia page of Rembrandt。

3.2 不使用vue-cli 簡易搭建webpack專案可參考

webpack官網5秒搭建一個webpack專案

  • 安裝webpack， npm install --save-dev webpack

  • 配置webpack.config.js檔案

 const path = require('path');
 module.exports = {
     entry: './src/app.js',（主檔案自己定義）
     output: {
         path: path.resolve(__dirname, 'bin'),
         filename: 'app.bundle.js'
     }
 };
複製程式碼

  • 配置本地服務 安裝客戶端伺服器 npm install webpack-dev-server；

    專案啟動 webpack-dev-server --content-base build/；

四、安裝各種需要的包

4.1. 常用包傳送門

4.2. 安裝指令

僅在開發環境使用的包：--save-dev npm install --save-dev 包名

生產環境也要使用的包： --save npm install --save 包名

4.3. 編譯ES6或以上，使用babel

  • cnpm install --save-dev babel-cli babel-preset-env
  • cnpm install --save-dev babel-loader
  • npm install --save-dev babel-polyfill

要安裝babel-polyfill的原因，官網解釋：Babel僅僅編譯了ES6的語法例如箭頭函式，使用babel-polyfill可以編譯一些全域性變數如Promise以及一些原生新特性如String.padStar。 Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

4.4. creat a .babelrc 檔案（若已經生成，則無需建立）

{
  "presets": [["env",]
}

複製程式碼

五、一些有用的配置

5.1 介面轉發 proxytable

在開發環境中，通過設定地址對映將複雜的url簡化，還可以解決跨域問題

    // config/index.js
        proxyTable: {
            '/api': {  //將請求路徑中包含api全部轉發到下面配置的target路徑中
            target: 'http://127.0.0.1:3000', // 你介面的域名或ip
            // secure: false,      // 如果是https介面，需要配置這個引數
            changeOrigin: true,     // 如果介面跨域，需要進行這個引數配置
            pathRewrite: {
            '^/api': ''
        }
    }},
複製程式碼

5.2 生產環境URL配置化（開發環境、線上）

let devUrl = 'api/asset/'; //與上面proxytable中配置的api路徑匹配
let proUrl = 'https://node.xxxx.com/asset/';
(curEnv == "production") ? (baseUrl = proUrl) :( baseUrl = devUrl);
複製程式碼

5.3. 模組按需載入

使用vue-cli構建的專案，在 預設情況下 ，執行npm run build會將所有的js程式碼打包為一個整體， 打包位置是 dist/static/js/app.[contenthash].js ，這個檔案是非常大，可能好幾兆，嚴重影響頁面效能。

在路由檔案中引入模組時分模組打包，把我們想要組合在一起的元件打包到一個chunk塊中去，使用webpack的 require.ensure,並且在最後加入一個chunk名，相同chunk名字的模組將會打包到一起。

router/index.js
const lotteryIndex = r => require.ensure([], () => r(require('@/pages/lottery/lottery-index.vue')), 'chunk1')
const drawList = r => require.ensure([], () => r(require('@/pages/lottery/draw-list.vue')), 'chunk2')
const drawDetail = r => require.ensure([], () => r(require('@/pages/lottery/draw-detail.vue')), 'chunk3')
複製程式碼

相關文章