從零開始搭建webpack應用

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

1、環境準備(做者是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 : 全局安裝報錯：沒有權限 ，或者npm指令沒反應

解決： 注意把nodePATH改在有權限的地方，不然後續使用命令行全局安裝包可能會有權限問題。

• 檢查環境變量PATH和NODE_PATH

  

  

  

• 查看全局安裝默認路徑： npm config get prefix
• 在node安裝路徑下新增 node_global和 node_cache2個文件夾
• 修改全局安裝默認路徑：

npm config set prefix 'C:\Users\Administrator\node\node_global' npm config set cache 'C:\Users\Administrator\node\node_cache'

• 再次查看全局安裝默認路徑
• 修改環境變量
  • 用戶變量- 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、包的管理

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、腳手架搭建

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、安裝各類須要的包

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、一些有用的配置

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')
複製代碼