最近在研究webpack，關(guān)于webpack鄙人計(jì)劃寫三篇文章：
- wepack的使用
- wepack的優(yōu)化方案
- 試讀wepack的源碼分析其原理
其目的就是為了寫下來印象深刻，理解通透旋奢，當(dāng)然方便日出自己的查看徒溪，當(dāng)然鄙人能力有限就珠，也希望各位給出寶貴的意見补履，歡迎拋磚~~
webpack 是什么？
WebPack可以看做是模塊打包機(jī)：它做的事情是太伊，分析你的項(xiàng)目結(jié)構(gòu)负蠕，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等）倦畅，并將其打包為合適的格式以供瀏覽器使用遮糖。
構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行 JavaScrip、CSS叠赐、HTML 代碼欲账，包括如下內(nèi)容屡江。
代碼轉(zhuǎn)換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等赛不。
文件優(yōu)化：壓縮 JavaScript惩嘉、CSS、HTML 代碼踢故，壓縮合并圖片等文黎。
代碼分割：提取多個(gè)頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載殿较。
模塊合并：在采用模塊化的項(xiàng)目里會有很多個(gè)模塊和文件耸峭，需要構(gòu)建功能把模塊分類合并成一個(gè)文件。
自動刷新：監(jiān)聽本地源代碼的變化淋纲，自動重新構(gòu)建劳闹、刷新瀏覽器。
代碼校驗(yàn)：在代碼被提交到倉庫前需要校驗(yàn)代碼是否符合規(guī)范洽瞬，以及單元測試是否通過本涕。
自動發(fā)布：更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)伙窃。
構(gòu)建其實(shí)是工程化菩颖、自動化思想在前端開發(fā)中的體現(xiàn)，把一系列流程用代碼去實(shí)現(xiàn)为障，讓代碼自動化地執(zhí)行這一系列復(fù)雜的流程晦闰。 構(gòu)建給前端開發(fā)注入了更大的活力，解放了我們的生產(chǎn)力产场。
Ready？ GO
mkdir webpack-start
cd webpack-start
npm init
然后繼續(xù)舞竿，配置webpack (時(shí)間就是金錢京景，建議使用cnpm，當(dāng)然土豪可以忽略~)
npm install webpack webpack-cli -D
創(chuàng)建src
-
創(chuàng)建dist
- 創(chuàng)建index.html
創(chuàng)建文件webpack.config.js
-
配置文件webpack.config.js
- entry：配置入口文件的地址
- output：配置出口文件的地址
- module：配置模塊,主要用來配置不同文件的加載器
- plugins：配置插件
- devServer：配置開發(fā)服務(wù)器
webpack.config.js
let path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {},
plugins: []
}
在src文件夾創(chuàng)建 index.js 和 b.js
我的目錄結(jié)構(gòu)：
然后當(dāng)前命令行輸入：
npx webpack --mode development
執(zhí)行后骗奖，dist多一個(gè)bundle.js确徙，哇成功了，执桌，這個(gè)就是我們的webpack打包文件
透徹一點(diǎn)鄙皇，我們看看webpack到底做了什么？
(function(modules) {
... //此處省略
})({
"./src/b.js": (function(module, exports, __webpack_require__) {
eval("我們的代碼");
/***/ })
/******/ }),
"./src/index.js": (function(module, exports, __webpack_require__) {
eval("我們的代碼");
/***/ })
/******/ }),
})
可以看出仰挣，傳進(jìn)去的modules 就是一個(gè)對象伴逸，其中我們js路徑作為key ： val是相對應(yīng)的value
函數(shù)里面就是webpack做的處理，其實(shí)里面主要是聲明了一個(gè) require方法webpack_require膘壶，
1错蝴，首先判斷緩存里是否已經(jīng)有了洲愤，表示模塊加載過了，直接返回
2顷锰，創(chuàng)建一個(gè)新的模塊 ---并且放到緩存----執(zhí)行模塊函數(shù)----標(biāo)記模塊為加載過的 ----返回模塊的導(dǎo)出對象
了解基本原理柬赐，來，我們開始干大事了~~
配置開發(fā)服務(wù)器
npm i webpack-dev-server –D
在webpack.config.js文件中配置一下官紫，
contentBase: path.resolve(__dirname, 'dist'),
host: "localhost",
compress: true,
port: 6039,
值得注意的是肛宋，webpack編譯后的產(chǎn)出文件（本案例的bundle.js）是在內(nèi)存的，打包后刪除文件bundle.js束世，還是可以訪問的
后面會繼續(xù)更新
- 支持加載css文件
- 自動產(chǎn)出html
- 編譯less 和 sass
- 處理CSS3屬性前綴
- 轉(zhuǎn)義ES6/ES7/JSX
- 服務(wù)器代理
