學(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è)類(lèi)型的三個(gè)文件，即index.html，main.js，webpack.config.js，見(jiàn)名知意，第一個(gè)是html文件，里面加載進(jìn)去js文件即可；main.js里面包含你想做的事情，demo中打印一句話(huà)；剩下的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多打印了一句話(huà)而已。
直接看index.html文件，
如圖，demo02只是多加載進(jìn)來(lái)一個(gè)js文件而已，打開(kāi)看看兩個(gè)JS文件，里面分別只有一句打印一句話(huà)的代碼而已。略過(guò)不提。
package.json文件依舊不管，兩個(gè)bundle.js文件也不管，兩個(gè)main.js文件簡(jiǎn)單的一句話(huà)也看過(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，也隨便打印一句話(huà)。然后再配置文件中加入配置：
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 的寫(xiě)法，先引入需要的react和react-dom，然后在render中把指定的內(nèi)容，顯示在ID為wrapper的控件上。
Demo04: CSS-loader?
Webpack允許你在JS文件中包含CSS，然后用CSS-loader來(lái)預(yù)處理CSS文件。
main.js只有一句話(huà)
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ò)我想改寫(xiě)一下，想把main.js改寫(xiě)成一個(gè)JSX文件。一起來(lái)試試。
1. 首先改造html，加個(gè)帶命名ID的控件div。
2. 寫(xiě)個(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文件中的寫(xiě)法不同于demo03的寫(xiě)法，要注意。
