在很久很久以前，當我們寫一個web網頁的時候，js實現的邏輯相對是比較弱的。但隨着前端技術的發展，前端能實現的內容越來越多。在js里面加了非常非常多的邏輯，於是呢，我們就發現我們通過這種面向過程的方式去寫我們的代碼。我們的代碼就會變得非常的長。后面js里面的邏輯會被堆的越來越大，越來越大，最終變得不可維護。
這個時候我們出現了一種新的編程方式，叫做面向對象編程
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>這是最原始的網頁開發</title> </head> <body> <p>這是我們的網頁內容</p> <div id="root"></div> <script src='./index.js'></script> </body> </html>
index.js
var dom = document.getElementById('root'); var header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); var sidebar = document.createElement('div'); sidebar.innerText = 'sidebar'; dom.appendChild(sidebar); var content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content);
改成
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>這是最原始的網頁開發</title> </head> <body> <p>這是我們的網頁內容</p> <div id="root"></div> <script src="./header.js"></script> <script src="./sidebar.js"></script> <script src="./content.js"></script> <script src="./index.js"></script> </body> </html>
header.js
function Header() { var header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); }
sidebar.js
function Sidebar() { var sidebar = document.createElement('div'); sidebar.innerText = 'sidebar'; dom.appendChild(sidebar); }
content.js
function Content() { var content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content); }
index.js
var dom = document.getElementById('root'); new Header(); new Sidebar(); new Content();
這樣的話就通過面向對象改造了我們的代碼。使用了面向對象使我們的代碼更具有維護性。為什么呢？關於header的邏輯全部放到header這個對象里。siderbar的邏輯都放在siderbar這個對象里。這樣的話，每一個對象他承載的職責是固定的。那么維護起來就方便的多。比如說如果header里面有問題，原來就需要在index.js里面整篇的去查找哪里有問題。現在如果header里面有問題，只需要打開header.js去查錯就可以了。
但是，，，如果我們把代碼拆成這個樣子，他就帶來了新的問題。大家會發現在index.js里面引用了多個js文件。這樣的話就會帶來幾個問題。首先整個頁面的加載速度會變慢。因為多出了三個http請求。頁面的加載速度當然會變慢。第二點，在index里面看到三個構造函數的創建，但是你並不能知道這每個構造函數對應的文件在哪里，如果你想知道這個文件在哪里的話，你必須要再回頭看html文件，你才會發現原來header跟index文件在同一個目錄下。所以第二點，看不出代碼跟文件之間的關系。第三點很難去查錯。假設我這個content.js位置放錯了，放在index下面。報錯位置是new Content。很難聯想到是js位置放錯了。所以拆成這樣。代碼也是不容易維護到。那為了解決這個問題，有人想出了這樣一種方式.把index.html,index.js改成這樣
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>這是最原始的網頁開發</title> </head> <body> <p>這是我們的網頁內容</p> <div id="root"></div> <script src="./index.js"></script> </body> </html>
index.js
import Header from './header'; import Sidebar from './sidebar'; import Content from './content'; var dom = document.getElementById('root'); new Header(); new Sidebar(); new Content();
那這樣寫是不是能解決之前的幾個問題呢？首先，index.html里只引入了一個js文件。所以他的網頁運行速度會很快。第二點，文件和文件之間的依賴關系非常的明確。上面的文件顛倒順序也不要緊，因為確保了下面引用之前，前面都加載好了。
這種引入方式就叫做ES Moudle模塊引入方式，跟react,vue里面非常像。
以前寫vue，react都能用啊，在這里怎么就報錯了呢？其實是這樣的，
在瀏覽器里，壓根就不認識這樣的語句，所以我們想實現我們的代碼，目前來看，根據是不可能的。這個時候，webpack就登場了。雖然原生瀏覽器不知道import是什么意思。但是我webpack知道。webpack知道import是引入模塊的意思。他可以幫瀏覽器做一個翻譯，告訴瀏覽器，這其實在引入一個模塊。
所以這個時候，我們可以安裝一下webpack，對當前的代碼做一次翻譯，首先怎么安裝呢，首先在命令行里面進入項目目錄，運行一下
npm init 項目名
一路回車，然后
npm install webpack webpack-cli
現在在項目的根目錄下已經安裝好了webpack，那么接下來就是對webpack做一次翻譯。怎么翻譯呢？
運行一下
npx webpack index.js
他的意思是用webpack去翻譯index.js這個文件。翻譯過后，根目錄下出現了一個dist的文件夾，dist文件夾多了一個main.js文件。這個就是webpack幫你翻譯好的文件
這個時候需要把引入的index.js改成dist下面main.js。main是index經過webpack翻譯的js文件。這個時候會報錯還是，是因為要
在要引入的文件里面導出這些文件。export default xxx。