如何用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插件和加載器的學習和運用的過程,紙上得來終覺淺 絕知此事要躬行,動手試試吧。
如何用webpack實現自動化的前端構建工作流