Webpack - 模塊打包工具
-
At its core, webpack is a static module bundler for modern JavaScript applications.
Webpack官方給與其的定義是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)垫释。它能夠?qū)S Module瓶殃，CMD，AMD序攘，CommonJS等模塊規(guī)范，打包轉(zhuǎn)換成瀏覽器能夠識別的Javascript代碼
使用webpack打包NodeJS的CommonJS語法的模塊
-
src
- js
- index.js
- header.js
- sidebar.js
- content.js
- footer.js
- index.html
- 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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/main.js"></script>
</body>
</html>
- header.js
function Header () {
let root = document.getElementById('root')
let header = document.createElement('div')
header.innerText = "header"
root.appendChild(header)
}
module.exports = Header
- sidebar.js
function SideBar () {
let sidebar = document.createElement('div')
sidebar.innerText = "sidebar"
root.appendChild(sidebar)
}
module.exports = SideBar
- content.js
function Content () {
let root = document.getElementById('root')
let content = document.createElement('div')
content.innerText = 'content'
root.appendChild(content)
}
module.exports = Content
- footer.js
function Footer () {
let root = document.getElementById('root')
let footer = document.createElement('div')
footer.innerText = 'footer'
root.appendChild(footer)
}
module.exports = Footer
最早的時候方仿，webpack只是一個JS的模塊打包工具醋虏，隨著webpack發(fā)展到今天，他已經(jīng)不僅僅只能夠打包JS模塊了兄朋，其能夠打包和識別如css、圖片怜械、字體文件等任何格式的文件颅和。
