如何用webpack實現自動化的前端構建工作流程

標籤：打包   int   hot   rip   esc   png   form   info   3.0   

什麼是自動化的前端構建流？

   1. 自動補全css私人首碼，自動轉化less\sass為css，自動轉化es6\vue\jsx文法為js，自動打包小圖片為base64以減少http請求，自動給js,css,甚至img加hash值，以避免瀏覽器緩衝，自動合并壓縮代碼，自動重新整理即時預覽效果（甚至免重新整理），可以按照自己喜歡的目錄結構存放原始資源檔，為了方便手機等訪問，不需要搭建apache、nginx等伺服器實現http訪問......

如何快速開始

 首先 git clone https://github.com/bjtqti/font-end-boilerplate.git  一份到本地

 然後 npm install && npm run start

 最後開啟瀏覽器，運行http://localhost:4000

接下來看看目錄結構：

解析一下這些目錄的用途：

|-  dist下面存放發布的js、css 檔案 （自動產生）

|- node_modules 下面是npm安裝的包檔案 （自動建立）

|- src 存放具體的業務代碼

|- task 存放webpack的配置代碼

|- task

     |- webpack.api.conf.js 用於webpack的api方式的設定檔 server.js用到

     |- webpack.dev.conf.js 用於CLI方式使用webpack 的配置

     |- webpack.prod.conf.js 用於生產環境打包輸出的配置

|- .postcssrc.js  post-loader的外掛程式設定檔，由於後面用了postcss.config.js所以重新命名了這個

|- .babelrc babel的設定檔，為瞭解析es6文法

|- .gitignore git的配置，指出要不參與版本控制的檔案及檔案夾

|- .package.json 包設定檔

|- postcss.config.js  post-loader配置

|- README.md github.com自動建立的項目說明檔案

|- server.js  本地開發調式用的web伺服器

需要重點掌握的是package.json 其次是server.js 和 task相關的配置內容

先看看package.json:

{  "name": "shop",  "version": "1.0.0",  "description": "webapp frontend shop",  "main": "index.js",  "scripts": {    "start": "node server.js",    "dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",    "build": "webpack --config ./task/webpack.prod.conf.js",    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [    "mall",    "shop"  ],  "author": "frog",  "repository": "https://github.com/bjtqti/font-end-boilerplate.git",  "license": "MIT",  "devDependencies": {    "babel-core": "^6.25.0",    "babel-loader": "^7.1.1",    "babel-plugin-transform-runtime": "^6.23.0",    "babel-preset-env": "^1.5.2",    "css-loader": "^0.28.4",    "express": "^4.15.3",    "extract-text-webpack-plugin": "^2.1.2",    "html-webpack-plugin": "^2.29.0",    "postcss-loader": "^2.0.6",    "style-loader": "^0.18.2",    "webpack": "^2.6.1",    "webpack-dev-middleware": "^1.11.0",    "webpack-dev-server": "^2.5.0",    "webpack-hot-middleware": "^2.18.0"  },  "dependencies": {    "babel-plugin-transform-runtime": "^6.15.0"  }}

　　

這個檔案其實就是一個json對象，裡邊重點掌 scripts 的用法。比如start：node server.js  對應 npm run start （或 npm start)  這條命令就相當於是在node環境下運行了server.js

那麼server.js(檔案名稱可以自已定）裡邊儲存了一些什麼內容？

var express = require("express");var webpack = require("webpack");var path = require(‘path‘)var app = express();var webpackConfig = require("./task/webpack.api.conf.js");var compiler = webpack(webpackConfig);var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, {  contentBase: webpackConfig.output.path,  publicPath: webpackConfig.output.publicPath,  //hot: true,    //stats: { colors: true },  quiet: true})var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, {//lazy: true,//path:‘/hmr‘,log: () => {}})app.use(express.static(‘./dist‘));app.use(hotMiddleware)app.use(devMiddleware)app.listen(4000, function () {  console.log("Listening on port 4000!");});

　　

其實就是使用了express來搭建一個小型的程式開發伺服器。然後引用webpack-dev-middleware和webpack-hot-middleware兩個中介軟體，結合webpack.api.conf.js的配置，實現打包和熱載入src下面的代碼。由於這裡涉及到express的知識，不打算涉及全棧的前端只需瞭解一下即可，因為後面還有一個封裝好的工具可以替代這些工作--webpack-dev-server

所以我在script中添加了一個dev：webpack-dev-server 的命令，這全完是為了方便學習這兩種方式的應用，實際上任選其中一種就好了，這一種可能會感覺更簡單，因為它是第一種方式的封裝，但是要深入的瞭解，還是建議看看第一種方式，Vue-cli也是採用的第一方式，因為它可供開發人員自由支配的空間更大。唯一需要注意的是，如果使用webpack-dev-server的話，目前還不能用webpack3.0+。

接下來運行npm run build  看看，dist目錄下是不是多了一些檔案？這就是將來可以直接發布到線上的代碼了。

到這裡，打包，發布 都介紹完了，下面簡單示範一下熱替換（也就是所謂的無重新整理替換效果）。為了示範方便，我在src下放了一些代碼. 

當我們開啟http://localhost:4000的時候，瀏覽器上有一段綠色的文字:Hello world 還有一個時間毫秒數，加這個毫數的目的是為了示範，如果頁面重新整理了，數字會改變。

然後修改style.css中的內容，比如把字型顏色改成紅色，瀏覽器上的字型顏色也相應的變化了，而數字沒有發生改變。如果手動重新整理的話，可以看到數字是會變化的。

這不僅會節省時間，而且對於要儲存頁面狀態（比如某按鈕選中）的情況非常有用。當我們修改hello.es6的時候，頁面變成了自動重新整理，這是因為我沒有使用js的熱替換載入器。

如果對html的修改，也想要自動重新整理的話，需要用到外掛程式，發出相應的事件。比如vue-cli中的方式：

// force page reload when html-webpack-plugin template changescompiler.plugin(‘compilation‘, function (compilation) {  compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) {    hotMiddleware.publish({ action: ‘reload‘ })    cb()  })})

這裡只是發出一個通知：action:‘reload‘，要使頁面自動重新載入，還需要有一個接收通知的代碼：

比如在入口中加入：

/* eslint-disable */
require(‘eventsource-polyfill‘)
var hotClient = require(‘webpack-hot-middleware/client?noInfo=true&reload=true‘)

hotClient.subscribe(function (event) {
if (event.action === ‘reload‘) {
window.location.reload()
}
})

這個地方比較深奧，沒有弄明白也沒關係，有其它方式同樣可以實現。比如webpack-dev-server 內部已經自動完成了對不支援熱替換的載入器，自動降為重新整理。

這也是為什麼在開發環境下使用了extract-text-webpack-plugin（提取css的外掛程式）後，樣式的熱替換變成了重新整理效果的原因。

 

小結：

   通過對webpack的運用，搭建一個前端自動化構建工作流程，做到學以致用。對一些常用的webpack配置和外掛程式有了實踐經驗之後，即便去用vue-cli這樣現成的工具，也可以放心的按照自己的實際情況去修改了。自動化構建的過程，其實就是對webpack外掛程式和載入器的學習和運用的過程，紙上得來終覺淺 絕知此事要躬行，動手試試吧。

　

 

如何用webpack實現自動化的前端構建工作流程