具體的安裝步驟網上可以搜到很多,這裡不再贅述.安裝完畢後開啟node.js自帶的命令列工具這裡寫圖片描述然後輸入如下命令全域性安裝webpack工具npminstall-gwebpack接著透過命令列工具定位到你的工程檔案的根目錄下,再次安裝webpack到你的工程中npminstallwebpack2.編寫webpack.config.js檔案在根目錄下建立webpack.config.js,這個檔案是用來描述一些要使用webpack工具進行打包的配置資訊,檔案內容如下:這裡寫圖片描述透過該檔案可以使用webpack打包工具,webpack會從import.js進入,對該檔案中的內容進行編譯並打包,最終會在dist目錄下生成打包好的檔案bundle.js,編譯打包過程中用到的工具在module物件的loaders中宣告,這裡使用了babel-loader來對JS檔案進行編譯(包括從ES6轉換為ES5以及打包)3.建立import.js建立一個import.js,內容如下:這裡寫圖片描述在該檔案中透過ES6語法import從export.js中引入firstName和lastName變數.並且透過console.log將引入的兩個變數列印到控制檯.4.建立export.js這裡寫圖片描述在該檔案中透過ES6語法export將檔案中的幾個變數作為模組輸出給別的檔案引用.5.建立HTML檔案在HTML檔案中直接將webpack最終打包生成的bundle.js檔案引入即可,因為透過webpack工具已經將export.js和import.js的所有內容都打包到一個檔案bundle.js中了,因此在HTML檔案中引入該檔案即可以將兩個JS檔案中的程式碼都執行.這裡寫圖片描述6.配置.babelrc檔案在工程檔案的根目錄下建立一個.babelrc檔案(注意前面有個點),這個檔案是用來描述我要根據什麼樣的規則、或者是將JS檔案編譯成什麼版本的檔案(比如說ES5).該檔案的內容如下:這裡寫圖片描述7.下載相關依賴模組方式1:可以像下面這樣,直接在專案根目錄下建立一個package.json檔案,並且在檔案中指定devDependencies物件,在該物件中寫上我編譯及打包中所要使用到的依賴模組,圖片中的webpack就是用於打包的工具,而其他的以babel開頭的選項都是編譯JS檔案並打包所需要用到的依賴模組.這裡寫圖片描述建立好package.json檔案後,在命令列中輸入npminstallnpm工具就會根據該檔案中devDependencies選項下載對應的依賴模組.方式2(推薦):Ctrl+R開啟執行,然後輸入cmd開啟命令列工具,透過命令列工具一個個安裝,這樣可以直接透過npm去下載依賴模組最新的穩定的版本,同時也不需要自己去記這些模組的版本號npminstallbabelnpminstallbabel-clinpminstallbabel-corenpminstallbabel-loadernpminstallbabel-preset-es20158.使用webpack打包使用命令列工具定位到專案的根目錄下,然後輸入如下指令webpack等待一會兒就會發現工程檔案的目錄下多了一個dist資料夾,裡面放著的就是打包好了的bundle.js檔案,在HTML檔案中透過下面的程式碼引入js檔案<scriptsrc="dist/bundle.js"></script>然後在瀏覽器上執行html檔案,使用F12開啟開發者工具,就可以看到console選項中輸出兩行記錄”Micheal”,“Jackson”