1.webpack 的使用
1.1先創建一個目錄，再創建如圖一下的文件
1.2在項目根目錄中運行 npm i webpack --save-dev 安裝到依賴項目中
1.3使用命令 npm init 初始化項目
1.4使用 npm i 庫名 --save 安裝各依賴庫
1.5在main.js裏面編寫我們的函數
1.6. 直接在頁面上引用main.js會報錯，因爲瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換爲低級的瀏覽器能識別的語法；
webpack 打包 main.js 到 dist 中
2.1 webpack version 4.0以上使用 webpack ./src/main.js ./dist/bundle.js 會出錯
在控制檯可以看到main.js已經成功打包到 dist中去了，但是實際上是沒有成功的,原因是版本過高了，原來的命令已經不適合用了。
把原來的命令改爲 webpack ./src/main.js -o ./dist/bundle.js
可以看到打包已經成功了,(自動忽略警告)
2.2我們每次寫完main.js 都要 執行一下 webpack ./src/main.js -o ./dist/bundle.js 命令 ,這樣很麻煩。
這個時候我們可以在根目錄創建一個文件名爲：webpack.config.js
2.3在這個文件裏面我們要指定入口和出口，
入口就是要打包的文件；出口就是要打包到那裏的文件。
2.4有時候hbuilder不能將join識別成一個函數這時候配置文件可以改成下面的樣子。
2.5這時候再運行命令 webpack 結果如下
2.6每次修改代碼後，都要運行一下webpack命令，這樣太麻煩了，所有引出了
webpack-dev-server，來實現代碼實時打包編譯，當修改代碼之後，會自動進行打包構建。
3.webpack-dev-server
3.1. 運行*cnpm i webpack-dev-server --save-dev*安裝到開發依賴
3.2. 因爲 webpack-dev-sever是本地項目安裝的，所以無法全局運行，假如運行會出現一下錯誤。
3.3. 這時候就要去 package.json添加一個命令
“dev” : “webpack-dev-server”
3.4再次運行命令 npm run dev
3.5 這時候我們每一次修改完代碼後，它都會幫我們自動打包
3.6.這時候我們要查看我們自己的網頁 已經是不像以前那個樣子直接打開了，而是要通過它開啓的服務地址打開。
3.6這個時候訪問webpack-dev-server啓動的**http://localhost:8080**/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件（bundle.js放在內存裏面了），需要修改index.html中script的src屬性爲:<script src="../bundle.js"></script>
3.7修改引用bundle.js的引用路徑，這時候就能實時刷新了。（不用刷新瀏覽器）
3.8 加一個參數 --open 在dev 裏面，每次運行 npm run dev 都會自動打開瀏覽器
也可以加個命令打開指定窗口（–port 8888）
3.9 爲了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啓動的根目錄
3.91 現在每次運行 npm run dev 的命令都是講main.js重新打包成bundle.js文件，這樣太浪費時間了，這個時候可以 加個指令 --hot 熱加載，它可以每次打包都是修改過的文件。
3.92.由於使用--contentBase指令的過程比較繁瑣，需要指定啓動的目錄，同時還需要修改index.html中script標籤的src屬性，所以推薦大家使用html-webpack-plugin插件配置啓動頁面.（先安裝 html-webpack-plugin插件）
// 導入處理路徑的模塊
var path = require('path');
// 導入自動生成HTMl文件的插件
**var htmlWebpackPlugin = require('html-webpack-plugin');**
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
output: { // 配置輸出選項
path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
},
plugins:[ // 添加plugins節點配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路徑
filename:'index.html'//自動生成的HTML文件的名稱
})
]
}
將index.html中script標籤註釋掉，因爲html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！
內存裏面的頁面（自動幫我們引用bundle.js）
硬盤上的頁面。
