用webpack實現前端自動化構建

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

   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 changes
compiler.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插件和加載器的學習和運用的過程，紙上得來終覺淺 絕知此事要躬行，動手試試吧。