webpack前端工程化構建工具的使用
一.模塊打包機
1.創建文件
在目標文件下建立一個src文件夾作為js代碼區；作為例子，我創建了兩個js文件，並利用commonJS規範require引入到index.js中；
moduleA.js:
module.exports={ name:"MoudleA", getName:function(){ return "我是AAA模塊" } }
moduleB.js:
module.exports={ name:"MoudleB", getName:function(){ return "我是BBB模塊" } }
index.js:
var moduleA = require("./moduleA"); var moduleB = require("./moduleB"); console.log(moduleA.name); console.log(moduleB.name);
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <div></div> <script src="src/index.js"></script> <!-- <script src="dist/index.bundle.js"></script>--> </body> </html>
此時運行必定會出錯。因為瀏覽器不認識require,瀏覽器不支持什麽commonJS,所以這時候需要用到webpack。
2.安裝webpack
npm install -g webpack //全局安裝
3.打包
webpack src/index.js ./build.js
把index.js打包成build.js，所以index.html的script路徑要改為新的打包後的文件路徑。
<script src="build.js"></script>
此時再執行webpack src/index.js ./build.js成功則會生成一個build.js文件。
4.簡化打包指令
我們前面在更改代碼時需要多次執行webpack src/index.js ./build.js命令，那麽如何簡化這條命令，換句話說，可不可以用webpack這個指令來代替這一長串呢？當然是可以的。
首先，配置webpack.config.js文件；
這裏的輸出文件夾dist如果不存在會自動幫我們創建好。配置好入口和輸出路徑後別忘記改index.html的script路徑。
需要註意的是，我們現在只是全局安裝了webpack,這是不夠的，我們需要局部再安裝一次webpack,npm install --save-dev webpack
然後我們再執行webpack命令。
4.熱更新webpack-dev-server
我們在每次修改代碼的時候都需要手動的執行webpack命令，我們可以用熱更新webpack-dev-server自動的更新瀏覽器；
安裝webpack-dev-server
npm install --save-dev webpack-dev-server
在webpack.config.js裏面配置devServer
此時執行
webpack-dev-server --inline --hot
便能實現熱更新了。還有更簡化的，便是配置package.json的啟動，
這裏增加一條 "start":"webpack && webpack-dev-server --inline --hot" 便實現了npm start 代替webpack和webpack-dev-server --inline --hot命令
執行
npm start
打開瀏覽器8088端口，
webpack前端工程化構建工具的使用