什麼是webpack？
- webpack是一個現代JavaScript應用程序的靜態模塊打包器，在webpack裏一切文件皆模塊，通過loader轉換文件，通過plugin注入鉤子，最後輸出由多個文件組合成的文件，webpack專注構建模塊化項目。
-
webpack可以看做是模塊打包機：他做的事情是，分析項目，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的拓展語言（scss， TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
-
![]()
WebPack常見概念
WebPack優點
- 模塊化開發，能做到開箱即用，一步到位。
- 使用TypeScript
- Scss，less，sass等css預處理器
- 可通過plugin擴展，完整好用又不失靈活
WebPack四個核心概念
- entry：一個可執行文件或庫的入口文件。
- chunk：多個文件組成的一個代碼塊。例如把一個可執行文件和他所有依賴的模塊組合爲一個chunk，這體現了webpack的打包機制。
- loader：文件轉換器。例如把es6轉換爲es5，scss轉換爲css。
- plugin：插件，用於擴展webpack的功能，在webpack構建生命週期的節點上加入擴展hook爲webpack加入功能。
Webpack構建流程
- 解析webpack配置參數，合併從shell傳入和webpack.config.js文件裏配置的參數，生產最後的配置結果。
- 註冊所有配置的插件，好讓插件監聽webpack構建生命週期的事件節點，以做出對應的反應。
- 從配置的entry入口文件開始解析文件構建AST語法樹，找出每個文件所依賴的文件，遞歸下去。
- 在解析文件遞歸的過程中根據局文件類型和loader配置找出合適的loader用來對文件進行轉換。
- 遞歸完後得到每個文件的最終結果，根據entry配置生成代碼塊chunk。
- 輸出所有chunk到文件系統。
Webpack幾種常見的loader
- file-loader：把文件數出到一個文件夾中，在代碼中通過相對URL去引用輸出的文件。
- url-loader：和file-loader類似，但是能在文件很小的情況下以base64的方式把文件內容注入到代碼中去。
- source-map-loader：加載額外的source map文件，以方便斷點調試。
- image-loader：加載並且壓縮圖片文件。
- babel-loader：把es6轉換成es5。
- css-loader：加載CSS，支持模塊化、壓縮、文件導入等特性。
- style-loader：把CSS代碼注入到JavaScript中，通過DOM操作去加載CSS。
- eslint-loader：通過ESLint檢查JavaScript代碼。
什麼是模塊的熱更新？
- 模塊熱更新是webpack的一個功能，他可以使得代碼修改過後不用刷新瀏覽器就可以更新，是高級版的自動刷新瀏覽器。
- DevServer中通過hot屬性可以控制模塊的熱替換。
- 通過配置文件
const webpack = require('webpack');
const path = require('path');
let env = process.env.NODE_ENV == "development" ? "development" : "production";
const config = {
mode: env,
devServer: {
hot:true
}
}
plugins: [
new webpack.HotModuleReplacementPlugin(), //熱加載插件
],
module.exports = config;
2. 通過命令行
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot",
},
懶加載（按需加載路由）
webpack中提供了require.ensure()來實現按需加載。以前引入路由是通過import這樣的方式引入，改爲const定義的方式進行引入。
不進行頁面按需加載的引入方式：
import home from '../../common/home.vue'
進行頁面按需加載的引入方式：
const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))
Webpack和grunt、gulp的不同
1. 概念區別：
（1）gulp/grunt是一種能夠優化前端的開發流程的工具。
（2）webpack是一種模塊化的解決方案。
2. 工作方式的區別：
（1）Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯、組合、壓縮等任務的具體步驟。工具之後可以自動替你完成這些任務。
（2）Webpack的工作方式：把你的項目當做一個整體，通過給定的主文件（如：index.js），webpack將從這個文件開始找到你的項目的所有依賴文件，使用loader處理他們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。
3. 基於類型的區別
（1）grunt和gulp是基於任務和流（task、stream）的。類似jQury，找到一個（或一類）文件，對其做一系列鏈式操作，更新流上的數據，整條鏈式操作構成了一個任務，多個任務就構成了整個web的構建流程。
（2）webpack是基於入口的。webpack會自動地遞歸解析入口所需要加載的所有資源文件，然後用不同的loader來處理不同的文件，用plugin來擴展webpack功能。
Webpack實踐
安裝 Webpack
npm install webpack -g
創建項目
創建項目目錄
mkdir app
添加runoob1.js
app/runoob1.js 文件
document.write("It works.");
在app目錄下添加index.html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
接下來我們使用 webpack 命令來打包：
webpack runoob1.js -o bundle.js
接下來我們創建另外一個 js 文件 runoob2.js
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代碼如下：
document.write(require("./runoob2.js"));
接下來我們使用 webpack 命令來打包：
webpack runoob1.js -o bundle.js
