【webpack系列】webpack小老弟打包大項目

上集回顧：

話音剛落 ~ npm老大哥又來電話了【有大工程】。
「喂，老大哥，對方啥陣形啊？」
「4-4-2? 踢你的？」
「行，立刻帶上大姨夫嗷，拜拜！」

 webpack小老弟在接到npm老大哥的介紹後，立馬動身參與到大項目中。準備狠狠地大展身手~~~

本篇文章知識內容：

• 加載css
• css抽取
• webpack中常見的loader
• webpack中常見的 plugins

---

正文開始

小老弟大吃一驚

 webpack哼着小曲：「畫畫的baby，畫畫的baby...」；過了半個小時車程後，終於見到了大工程負責人：茂狸【校園商鋪公衆號開發負責人】。webpack打完招呼後就匆匆忙忙的去見一下工程：school-store。

「哇！這...有點棘手啊，又圖片、css啥的，不過還行，難不倒我」。

「額~是這樣的，webpack兄」；茂狸此時說到，

「打包以前，咱們有些想問您一些關於代碼組織的事情，您看行嗎？」

「嗯嗯，茂狸請講！」

「是這樣的，請先看下咱們的項目結構。」

assset 
	- cat.jpg
css 
	- public.css // 項目公共css
home
	- home.js
	- home.html
	- home.css
	- index.js // home模塊的入口（順着該入口組織代碼）
login
	- login.js
	- login.html
	- login.css
	- index.js // login模塊的入口

部分核心代碼：

// login - index.js代碼
import './login.css'
import '../css/public.css'
import login from './login'
/*設置頁面得交互邏輯* */
function initPage() {
    let elAccount = document.getElementById('account');
    let elPass = document.getElementById('pass');
    let elLogin = document.getElementById('login');
    elLogin.onclick = function (el) {
        if(login.login(elAccount.value, elPass.value)) {
            login.jumpToHome()
        }else {
            alert('帳號或密碼錯誤')
        }
    }
}
initPage();

加載css文件

 茂狸繼續說道：「上一個來打包的同志報錯了，在引入login.css的時候發生的，請問下是怎麼回事？並且，咱們本身已經寫好的html怎麼使用到勒？」

 「e，上個兄弟也是冤枉，這確定是大家的打包設計圖紙沒有定義對css的支持啊，咱們這行默認只認識es5的。這樣吧，你看看其餘客戶的設計」

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
	...
}

 "不過你確定要先讓老大哥先把style-loader和css-loader這兩個朋友叫過來，另外啊，告訴您個經驗：除了es5外，你想要支持其餘的都得另外搖人，先讓npm老大哥喊人，而後在圖紙的rules中設置對其餘文件類型的支持。"

「我懂了，我立刻試試」。

css樣式抽離
「咦，css是生效了，但我怎麼沒看到css代碼呀？」 「嗯，我把css代碼寫在了js代碼中勒，您看圖」

「可是這種作法不適合客戶端緩存喔，能不能幫我把css單獨抽出文件來？」

「嗯，先生，能夠的。我介紹【MiniCssExtractPlugin】給您認識，這個適合webpack4及以上的版本。若是您下次請到的是webpack1-3的話，您就找【extract-text-webpack-plugin】，下面再給您看一下其餘客戶關於【MiniCssExtractPlugin】的寫法吧。」

配置webpac的小經驗
 webpack小老弟內心感嘆道：「唉，作服務行業真的好難，這樣的問題真的不知道問了多少次。下次必定在個人明信片上標註一下個人施工單webpack.config.js的使用說明。」

我只認識js文件，若是遇到css、jpg這些我不認識的文件呢，您必定要想到【loader】

• 先找npm加載對應的loader
• 在webpack.config.js中的loader對象下配置

若是您還想在loader的過程當中想要增長其餘功能，那就要想到 【plugin】

• 先找npm加載對應的plugin
• 在webpack.config.js中的plugin對象下配置

常見的loader&plugin

而後經常使用的loader跟plugin的好朋友我也列個：

loader

• css-loader、style-loader // css 樣式
• less-loader、sass-loader // 預編譯
• vue-load
• file-loader、url-loader // 文件
• babel-loader，babel-preset-es2015，babel-preset-react // js，轉碼

plugin

• html-webpack-plugin // 自動添加html
• mini-css-extrac-plugin 、extract-text-webpack-plugin // css抽離
• common-chunk-plugin 、 optimization.splitChunks【推薦】 // 代碼抽離

---

辛辛苦苦幹完這一票以後，webpack小老弟已經滿頭大汗勒，忽然發現今天已經週五了喔。

心想：

「週五就該有周五的態度，有什麼事，下週一再說吧。」 「老大哥來了都很差使」 「今晚整個醉仙脆皮燒雞吃吃先」 「不，我今晚還要來把極地大亂鬥」