何為webpack
簡單來說猖毫，webpack是實現(xiàn) js 能夠在瀏覽器模塊化的一個前端打包工具辩越。（來自官網(wǎng)-->）本質(zhì)上赃蛛，webpack?是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(static module bundler)稽亏。在 webpack 處理應(yīng)用程序時论熙，它會在內(nèi)部創(chuàng)建一個依賴圖(dependency graph)，用于映射到項目需要的每個模塊眼刃，然后將所有這些依賴生成到一個或多個bundle绕辖。
對webpack不是很熟悉，一直想找個機會好好的學(xué)一學(xué)擂红。但是看了官網(wǎng)仪际，感覺不知道從哪里下手。找到了阮老師的教程昵骤，先擼一次看看树碱。
所有內(nèi)容來自阮老師，原文請移步?GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack
1.demo1? ? 單入口打包
? ? 主要是單入口文件的打包变秦，需要先配置 webpack.config.js文件成榜。內(nèi)容和commonjs的寫法一致。module.exports = {entry:'./main.js',output:{filename:'bundle.js'}};這里可以加個路徑蹦玫。當然了赎婚，需要引入 path 。path.resolve()?-?path.resolve?方法用于將相對路徑轉(zhuǎn)為絕對路徑樱溉。不過剛開始就不需要去書寫
2.demo2? ? 多入口打包
主要是多入口的打包挣输。webpack.config.js文件中配置如下。? ?
entry是一個對象福贞。打包出來的文件個數(shù)和入口個數(shù)保持一致撩嚼。名稱為 entry 的key值，即 bundle1.js肚医，bundle2.js绢馍。filename寫法為固定寫法。
3.demo3? ? babel-loader jsx/es6轉(zhuǎn)化loader
?loader?來預(yù)處理文件肠套。這允許你打包除 JavaScript 之外的任何靜態(tài)資源舰涌。(同樣來自官網(wǎng))說白了就是類似一個轉(zhuǎn)化器，有些文件或者語法瀏覽器不識別你稚，需要用loader轉(zhuǎn)化瓷耙！這里注意，只能轉(zhuǎn)化 語法刁赖，但是想promise搁痛，async，await 等es6宇弛，es7的對象鸡典，需要加墊片處理。安裝? babel-polyfill 安裝包枪芒，在 使用 es6或es7的js中彻况，import 'babel-polyfill'谁尸，在webpack配置文件 webpack.config.js中，entry 寫法為 entry: ["babel-polyfill", "./src/source-map.js"]纽甘。轉(zhuǎn)化出來的就是 es5 的寫法良蛮。更多請移步?webpack基礎(chǔ)探討 - 騰訊Web前端 IMWeb 團隊社區(qū) | blog | 團隊博客
babel-loader將JSX/es6轉(zhuǎn)化成瀏覽器可以識別的文件和語法。
這里我們轉(zhuǎn)化的是jsx語法悍赢。使用過react的决瞳，都知道jsx的哈。webpack.config.js中內(nèi)容如下
新增 module屬性左权，值為一個對象皮胡。rules為轉(zhuǎn)化的總規(guī)則，數(shù)組中每一個對象就是一個處理規(guī)則′套埽現(xiàn)在我們是處理jsx語法胸囱，test的值為正則玖媚，既然是jsx葵姥，那么就是jsx文件的后綴了另锋。exclude是忽略該目錄下聚唐。use是使用的loader呀潭，這里我們使用babel-loader淹真。options?屬性為字符串或?qū)ο笪稀Ｖ悼梢詡鬟f到 loader 中齐莲，將其理解為 loader 選項亿鲜。由于兼容性原因允蜈，也可能有?query?屬性，它是?options?屬性的別名蒿柳。使用?options?屬性替代饶套。
這里的es2015是轉(zhuǎn)化 es6語法的，現(xiàn)在的應(yīng)該是 babel-preset-env垒探。
4.demo04 css-loader? 在js中使用css
? ? 好氣啊妓蛮，一般我們使用css都是在html中，但是你想在js中使用怎么辦圾叼。webpack就允許你這樣做蛤克。在js文件中使用 require引入js文件。
webpack使用css-loader幫你構(gòu)建夷蚊。打包在一個js中构挤。webpack.config.js中如下。需要你執(zhí)行這個命令惕鼓，安裝這兩個依賴筋现。 npm install style-loader css-loader -D。同理，rules是一個轉(zhuǎn)化規(guī)則矾飞，既然新增了css處理規(guī)則彻犁，在rules中添加一個對象就好。
5.demo05 url-loader js中引入圖片
既然能夠引入css凰慈，那么圖片也是可以的了。需要事先安裝 url-loader驼鹅。limit限制圖片大小微谓，單位 bytes。如果圖片大小小于這個输钩，會被轉(zhuǎn)化為base64值豺型。游泳健身base64了解一下？如果大于就不會轉(zhuǎn)化买乃，會將路徑模糊化姻氨。
6.demo06? ? css局部作用域 略
7.demo07????UglifyJs Plugin? ? 這里我翻譯成壓縮插件吧，目的就是將代碼壓縮
webpack允許你使用插件擴展它的功能剪验，這里的 UglifyJs plugin插件用來縮小js代碼肴焊，是js文件大小變小。同樣的功戚，這里引入的無論是loader還是拆件娶眷，都要事先安裝其依賴包。這里我們安裝的是?uglifyjs-webpack-plugin啸臀。寫法如下届宠，plugins作用如其名，就是一個插件列表乘粒。
8.demo08????HTML Webpack Plugin and Open Browser Webpack Plugin
HTML webpack Plugin 用來幫你書寫index.html（有了這個插件豌注，你就不需要寫index.html文件了）。而Open Browser webpack Plugin 用來執(zhí)行webpack打包后幫你打開瀏覽器灯萍。同樣的轧铁，引入并書寫。plugins插件列表中竟稳，插件的配置需要寫在插件的括號內(nèi)属桦，一個配置對象。具體插件的配置對象他爸，可以查找webpack官網(wǎng)的配置聂宾。
HTML webpack Plugin 有默認的幫你配置的模板，如果不滿足需要诊笤∠敌常可手動配置模板。可以進行內(nèi)容的書寫纪他。顯示出來的界面title就 Custom template鄙煤。具體可看文檔GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles
9.demo09????Environment flags? ? 環(huán)境標志? ? DefinePlugin
DefinePlugin?允許創(chuàng)建一個在編譯時可以配置的全局常量。這可能會對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用茶袒。具體可到DefinePlugin? 查看梯刚。(就是說有些邏輯在dev下，有些邏輯在生產(chǎn)環(huán)境中薪寓⊥鲎剩可以用這個來進行配置，區(qū)別)new webpack.DefinePlugin中的配置對象的value值向叉，可以是常量锥腻，也可以是外部配置的值。這里是定義了一個DEBUG變量來母谎。在進行webpack打包時瘦黑，給DEBUG值賦值。另外在自己打包時奇唤，不想讓打包出來的代碼被壓縮幸斥。可以在webpack.config.js中的exports中添加一個屬性冻记。見下圖
10.demo10????Code splitting? ? 代碼分割
在大型的web應(yīng)用中冗栗，所有的代碼都打包壓縮到一個文件當中演顾，這是不科學(xué)的，這樣對于界面的渲染隅居，首屏?xí)r間都是非常不友好的钠至。我們可以把代碼塊分成多個部分，還可以實現(xiàn)按需加載胎源。
11.demo11????Code splitting with bundle-loader
使用 bundle-loader來實現(xiàn)代碼分割代赁。效果同上
