上集回顧：
話音剛落 ~ 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();
?茂貍繼續說道：“上一個來打包的同志報錯了，在引入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代碼寫在了js代碼中勒，您看圖”
“但是這種做法不適合客戶端快取喔，能不能幫我把css單獨抽出檔案來？”
“嗯，先生，可以的，我介紹【MiniCssExtractPlugin】給您認識，這個適合webpack4及以上的版本，如果您下次請到的是webpack1-3的話，您就找【extract-text-webpack-plugin】，下面再給您看一下其他客戶關于【MiniCssExtractPlugin】的寫法吧，”
?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
- 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小老弟已經滿頭大汗勒，突然發現今天已經周五了喔，
心想：
“周五就該有周五的態度，有什么事，下周一再說吧，”
“老大哥來了都不好使”
“今晚整個醉仙脆皮燒雞吃吃先”
“不，我今晚還要來把極地大亂斗”
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/231401.html
標籤：JavaScript
上一篇：Event Loop