webpack 是前端的一個專案構建工具，它是基於 Node.js 開發出來的一個前端工具；

webpack安裝的兩種方式

1. 執行npm i webpack -g全域性安裝webpack，這樣就能在全域性使用webpack的命令
2. 在專案根目錄中執行npm i webpack --save-dev安裝到專案依賴中

使用webpack的配置檔案簡化打包時候的命令

1. 在專案根目錄中建立webpack.config.js
2. 由於執行webpack命令的時候，webpack需要指定入口檔案和輸出檔案的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：

 // 匯入處理路徑的模組   var path = require('path'); ​  

// 匯出一個配置物件，將來webpack在啟動的時候，會預設來查詢webpack.config.js，並讀取這個檔案中匯出的配置物件，來進行打包處理   module.exports = {       entry: path.resolve(__dirname, 'src/js/main.js'),

// 專案入口檔案       output: { // 配置輸出選項           path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑           filename: 'bundle.js' // 配置輸出的檔名       }   }

實現webpack的實時打包構建

1. 由於每次重新修改程式碼之後，都需要手動執行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現程式碼實時打包編譯，當修改程式碼之後，會自動進行打包構建。
2. 執行cnpm i webpack-dev-server --save-dev安裝到開發依賴
3. 安裝完成之後，在命令列直接執行webpack-dev-server來進行打包，發現報錯，此時需要藉助於package.json檔案中的指令，來進行執行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js檔案，這是因為webpack-dev-server將打包好的檔案放在了記憶體中

• 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin外掛配置啟動頁面

由於使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標籤的src屬性，所以推薦大家使用html-webpack-plugin外掛配置啟動頁面.

1. 執行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
2. 修改webpack.config.js配置檔案如下：

  // 匯入處理路徑的模組   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檔案的名稱           })       ]   }

1. 修改package.json中script節點中的dev指令如下：

"dev": "webpack-dev-server"

1. 將index.html中script標籤註釋掉，因為html-webpack-plugin外掛會自動把bundle.js注入到index.html頁面中！

實現自動開啟瀏覽器、熱更新和配置瀏覽器的預設埠號

注意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！

方式1：

• 修改package.json的script節點如下，其中--open表示自動開啟瀏覽器，--port 4321表示開啟的埠號為4321，--hot表示啟用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

1. 修改webpack.config.js檔案，新增devServer節點如下：

devServer:{       hot:true,       open:true,       port:4321   }

1. 在頭部引入webpack模組：

var webpack = require('webpack');

1. 在plugins節點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css檔案

1. 執行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js這個配置檔案：

module: {

// 用來配置第三方loader模組的    

  rules: [ // 檔案的匹配規則   { test: /\.css$/, use: ['style-loader', 'css-loader'] }

//處理css檔案的規則       ]   }

1. 注意：use表示使用哪些模組來處理test所匹配到的檔案；use中相關loader模組的呼叫順序是從後向前呼叫的；

使用webpack打包less檔案

1. 執行cnpm i less-loader less -D
2. 修改webpack.config.js這個配置檔案：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass檔案

1. 執行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中新增處理sass檔案的loader模組：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

1. 執行cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中新增處理url路徑的loader模組：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

1. 可以通過limit指定進行base64編碼的圖片大小；只有小於指定位元組（byte）的圖片才會進行base64編碼：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高階JS語法

1. 執行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
2. 執行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
3. 在webpack.config.js中新增相關loader模組，其中需要注意的是，一定要把node_modules資料夾新增到排除項：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

1. 在專案根目錄中新增.babelrc檔案，並修改這個配置檔案如下：

{   "presets":["es2015", "stage-0"],   "plugins":["transform-runtime"] }

IE相容性處理

1、下載外掛 cnpm install --save babel-polyfill
2入口檔案main.js引入( import 'babel-polyfill') 
3、配置檔案修改 vue-loader.conf（腳手架工具構建的專案修改這個配置檔案，如果沒有就修改webpack.conf.js),如下增加entry  {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }