一彪标、什么是webpack仿便？
- webpack是一個現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器谦去，在webpack里一切文件皆模塊憎蛤，通過loader轉(zhuǎn)換文件外傅，通過plugin注入鉤子，最后輸出由多個文件組合成的文件俩檬，webpack專注構(gòu)建模塊化項目萎胰。
-
webpack可以看做是模塊打包機：他做的事情是，分析項目棚辽，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的拓展語言（scss技竟， TypeScript等），并將其打包為合適的格式以供瀏覽器使用屈藐。
webpack.png
二榔组、四個核心概念
- entry：一個可執(zhí)行文件或庫的入口文件熙尉。
- chunk：多個文件組成的一個代碼塊。例如把一個可執(zhí)行文件和他所有依賴的模塊組合為一個chunk搓扯，這體現(xiàn)了webpack的打包機制检痰。
- loader：文件轉(zhuǎn)換器。例如把es6轉(zhuǎn)換為es5锨推，scss轉(zhuǎn)換為css铅歼。
- plugin：插件，用于擴展webpack的功能换可，在webpack構(gòu)建生命周期的節(jié)點上加入擴展hook為webpack加入功能椎椰。
三、webpack構(gòu)建流程
- 解析webpack配置參數(shù)沾鳄，合并從shell傳入和webpack.config.js文件里配置的參數(shù)慨飘，生產(chǎn)最后的配置結(jié)果。
- 注冊所有配置的插件洞渔，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點套媚，以做出對應(yīng)的反應(yīng)。
- 從配置的entry入口文件開始解析文件構(gòu)建AST語法樹堤瘤，找出每個文件所依賴的文件，遞歸下去浆熔。
- 在解析文件遞歸的過程中根據(jù)局文件類型和loader配置找出合適的loader用來對文件進行轉(zhuǎn)換。
- 遞歸完后得到每個文件的最終結(jié)果慎皱，根據(jù)entry配置生成代碼塊chunk。
- 輸出所有chunk到文件系統(tǒng)叶骨。
四茫多、webpack和grunt、gulp的不同
1. 概念區(qū)別：
（1）gulp/grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具天揖。
（2）webpack是一種模塊化的解決方案。
2. 工作方式的區(qū)別：
（1）Grunt和Gulp的工作方式是：在一個配置文件中今膊，指明對某些文件進行類似編譯、組合伞剑、壓縮等任務(wù)的具體步驟斑唬。工具之后可以自動替你完成這些任務(wù)。
（2）Webpack的工作方式：把你的項目當(dāng)做一個整體，通過給定的主文件（如：index.js）恕刘，webpack將從這個文件開始找到你的項目的所有依賴文件，使用loader處理他們雪营，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
3. 基于類型的區(qū)別
（1）grunt和gulp是基于任務(wù)和流（task洋访、stream）的。類似jQury姻政，找到一個（或一類）文件岂嗓，對其做一系列鏈式操作汁展，更新流上的數(shù)據(jù)厌殉，整條鏈式操作構(gòu)成了一個任務(wù)，多個任務(wù)就構(gòu)成了整個web的構(gòu)建流程公罕。
（2）webpack是基于入口的。webpack會自動地遞歸解析入口所需要加載的所有資源文件楼眷，然后用不同的loader來處理不同的文件，用plugin來擴展webpack功能罐柳。
五、幾種常見的loader
- file-loader：把文件數(shù)出到一個文件夾中齿梁，在代碼中通過相對URL去引用輸出的文件。
- url-loader：和file-loader類似勺择，但是能在文件很小的情況下以base64的方式把文件內(nèi)容注入到代碼中去蔗崎。
- source-map-loader：加載額外的source map文件扰藕，以方便斷點調(diào)試缓苛。
- image-loader：加載并且壓縮圖片文件。
- babel-loader：把es6轉(zhuǎn)換成es5笔刹。
- css-loader：加載CSS，支持模塊化舌菜、壓縮亦镶、文件導(dǎo)入等特性日月。
- style-loader：把CSS代碼注入到JavaScript中缤骨，通過DOM操作去加載CSS。
- eslint-loader：通過ESLint檢查JavaScript代碼绊起。
六精拟、webpack的優(yōu)缺點
優(yōu)點
- 專注處理模塊化的項目，能做到開箱即用虱歪，一步到位蜂绎。
- 可通過plugin擴展笋鄙，完整好用又不是靈活。
- 使用場景不局限于web開發(fā)局装。
- 社區(qū)龐大活躍，經(jīng)常引入緊跟時代發(fā)展的新特性铐尚，能為大多數(shù)場景找到已有的開源擴展。
- 良好的開發(fā)體驗玫膀。
缺點
- webpack的缺點是只能用于采用模塊化開發(fā)的項目爹脾。
七、什么是模塊的熱更新灵妨？
- 模塊熱更新是webpack的一個功能，他可以使得代碼修改過后不用刷新瀏覽器就可以更新泌霍，是高級版的自動刷新瀏覽器。
- DevServer中通過hot屬性可以控制模塊的熱替換蟹地。
1、通過配置文件
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()來實現(xiàn)按需加載遍愿。以前引入路由是通過import這樣的方式引入耘斩，改為const定義的方式進行引入。
不進行頁面按需加載的引入方式：
import home from '../../common/home.vue'
進行頁面按需加載的引入方式：
const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))
九煌往、通過webpack處理長緩存
- 瀏覽器在用戶訪問頁面的時候，為了加快加載速度刽脖，會對用戶訪問的靜態(tài)資源進行存儲，但每一次代碼升級或是更新却邓，都需要瀏覽器去下載新的代碼院水，最方便和簡單的更新方式就是引入新的文件名稱腊徙。在webpack中可以在output中輸出的文件指定chunkhash檬某，并且分離經(jīng)常更新的代碼和框架代碼。通過NameModulesPlugin或是HashedModuleldsPlugin使再次打包文件名不變民傻。
