首先我們通過(guò)一個(gè)簡(jiǎn)單的例子，讓webpack去解析es module
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack初識(shí)</title>
</head>
<body>
</body>
</html>
<script src="./index.js"></script>
- index.js
import Header from './header';
import Content from './content';
import Footer from './footer';
new Header()
new Content()
new Footer()
- header.js
function Header() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Header';
dom.append(el);
}
export default Header;
- content.js
function Content() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Content';
dom.append(el);
}
export default Content;
- footer.js
function Footer() {
var dom = document.querySelector('body');
var el = document.createElement('div');
el.innerText = 'Footer';
dom.append(el);
}
export default Footer;
好了，都寫(xiě)完之后，運(yùn)行你會(huì)發(fā)現(xiàn)報(bào)錯(cuò)，原因是es module 本身瀏覽器是無(wú)法識(shí)別的，此時(shí)我們就得需要webpack 來(lái)解決這個(gè)問(wèn)題，讓瀏覽器可以識(shí)別我們的語(yǔ)法
# 安裝webpack-cli
npm init
npm install webpack webpack-cli --D
然后對(duì)index.js 進(jìn)行編譯
npx webpack index.js
此時(shí)會(huì)在根目錄輸入一個(gè)webpack處理好的文件，/dist/main.js。替換html中的index.js，然后就可以訪問(wèn)了。瀏覽器就可以識(shí)別es module了。講到這塊，大家應(yīng)該對(duì)webpack有了一個(gè)初步的認(rèn)識(shí)，接下來(lái)我們?cè)僖黄鹛接懫渲械膴W妙。
