學(xué)習(xí)webpack，直接觀看代碼理解。將自己的理解過(guò)程記錄下來(lái)，后續(xù)若有不同理解唆阿，再來(lái)修改。
獻(xiàn)上阮一峰老師的webpack教程地址：?webpack
將整個(gè)demo完整的clone下來(lái)锈锤，用vscode導(dǎo)入整個(gè)文件夾之后驯鳖，發(fā)現(xiàn)也只有15個(gè)demo而已，小case久免，so easy浅辙，開(kāi)擼。
Demo01: Entry file
組織架構(gòu)如圖阎姥，
bundle.js為自動(dòng)生成摔握，package.json為配置文件，也不用管丁寄。
所以只需要關(guān)心三個(gè)類型的三個(gè)文件氨淌，即index.html，main.js伊磺，webpack.config.js盛正，見(jiàn)名知意，第一個(gè)是html文件屑埋，里面加載進(jìn)去js文件即可豪筝；main.js里面包含你想做的事情，demo中打印一句話摘能；剩下的webpack.config.js就是整個(gè)webpack工程的配置文件了续崖。
module.exports = {
? entry: './main.js',
? output: {
? ? filename: './bundle.js'
? }
};
entry是入口，output是輸出生成的bundle文件對(duì)應(yīng)關(guān)系团搞。
運(yùn)行? ?cd? demo01严望，然后npm run dev即可
Demo02: Multiple entry files
首先運(yùn)行起來(lái)看一眼區(qū)別，cd demo02逻恐， 然后npm run dev走你像吻。
如圖，demo02只是比demo01多打印了一句話而已复隆。
直接看index.html文件拨匆，
如圖，demo02只是多加載進(jìn)來(lái)一個(gè)js文件而已挽拂，打開(kāi)看看兩個(gè)JS文件惭每，里面分別只有一句打印一句話的代碼而已。略過(guò)不提亏栈。
package.json文件依舊不管台腥，兩個(gè)bundle.js文件也不管宏赘，兩個(gè)main.js文件簡(jiǎn)單的一句話也看過(guò)了，那就剩下webpack的配置文件了览爵。代碼先粘出來(lái)，
module.exports = {
? entry: {? ? ?//? 入口
? ? bundle1: './main1.js',? ? //? 第一個(gè)JS文件
? ? bundle2: './main2.js'? ? //? 第二個(gè)JS文件
? },
? output: {
? ? filename: '[name].js'? ? //? ?輸出文件命名
? }
};
如圖可見(jiàn)镇饮，在entry里蜓竹，不再像demo01中那樣只有入口文件名，而是兩組key-value储藐，value的值都是我們的JS文件名字（帶有相對(duì)路徑）俱济，那么，key钙勃，我們猜想就是對(duì)應(yīng)生成的bundle文件名了吧蛛碌。
再看下方的output輸出對(duì)應(yīng)關(guān)系，filename的值為 [name].js辖源，那么這個(gè)name應(yīng)該就是一個(gè)變量蔚携，對(duì)應(yīng)的是entry中的key。既然這樣克饶，那我們來(lái)驗(yàn)證一下酝蜒。
添加第三個(gè)JS文件，main3.js矾湃，也隨便打印一句話亡脑。然后再配置文件中加入配置：
module.exports = {
? entry: {? ? ?//? 入口
? ? bundle1: './main1.js',? ? //? 第一個(gè)JS文件
? ? bundle2: './main2.js',? ? //? 第二個(gè)JS文件
? ? bundle3: './main3.js'? ? ?//? ? 添加的第三個(gè)文件
? ?},
? output: {
? ? filename: '[name].js'? ? //? ?輸出文件命名
? }
};
然后在html文件中引入加載我們生成對(duì)應(yīng)的bundle3.js文件，如圖
OK邀跃，添加完畢霉咨，編譯，運(yùn)行拍屑。
編譯：npm build? ? 運(yùn)行：npm run dev途戒，
? ?搞定，猜想正確僵驰。
Demo03: Babel-loader?
先上結(jié)構(gòu)圖：
有沒(méi)有發(fā)現(xiàn)JS文件不見(jiàn)了棺滞，而多了一個(gè)JSX文件（不知道的請(qǐng)百度），有點(diǎn)意思矢渊，看看介紹怎么說(shuō)继准。
加載器是預(yù)處理器，它可以在Webpack的構(gòu)建過(guò)程之前轉(zhuǎn)換你的應(yīng)用程序的資源文件(更多信息)矮男。
例如,Babel-loader可以JSX / ES6文件轉(zhuǎn)換成標(biāo)準(zhǔn)JS文件,之后Webpack將開(kāi)始構(gòu)建這些JS文件移必。Webpack的官方文檔有一個(gè)完整的加載器列表。
main.jsx 是一個(gè)JSX文件毡鉴。
先來(lái)看幾個(gè)文件的內(nèi)容代碼：
上面的代碼片段使用了Babel-loader加載器崔泵，它需要Babel的預(yù)設(shè)插件Babel -preset-es2015和Babel -preset-react 轉(zhuǎn)換編譯es2015和react秒赤。
圖2這是react 的寫法，先引入需要的react和react-dom憎瘸，然后在render中把指定的內(nèi)容入篮，顯示在ID為wrapper的控件上。
Demo04: CSS-loader?
Webpack允許你在JS文件中包含CSS幌甘，然后用CSS-loader來(lái)預(yù)處理CSS文件潮售。
main.js只有一句話
require('./app.css');
app.css
body {
background-color:blue;
}
注意，您必須使用兩個(gè)加載器來(lái)轉(zhuǎn)換CSS文件锅风。首先是CSS-loader來(lái)讀取CSS文件酥诽，另一個(gè)是樣式加載器將<style>標(biāo)簽插入HTML中。
運(yùn)行皱埠，npm run dev肮帐，一切正常。
不過(guò)我想改寫一下边器，想把main.js改寫成一個(gè)JSX文件训枢。一起來(lái)試試。
1. 首先改造html忘巧，加個(gè)帶命名ID的控件div肮砾。
2. 寫個(gè)JSX文件，如圖main1.jsx袋坑。
3. 修改webpack配置文件仗处，添加對(duì)應(yīng)的module.rules。依次如下方圖：
注意幾點(diǎn)：
1. 在html中枣宫，如果bundle.js在控件之前引入婆誓，會(huì)不顯示內(nèi)容。位置不可引錯(cuò)也颤。原因是因?yàn)榻o控件賦值操作其實(shí)是編譯在bundle.js里面的洋幻，因此必須放置控件之后。
2. 在JSX文件中的寫法不同于demo03的寫法翅娶，要注意文留。
