02-02.Webpack - 模块打包工具
2019-04-20 本文已影响0人
v刺猬v
Webpack - 模块打包工具
-
At its core, webpack is a static module bundler for modern JavaScript applications.
Webpack官方给与其的定义是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。它能够将ES Module，CMD，AMD，CommonJS等模块规范，打包转换成浏览器能够识别的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发展到今天，他已经不仅仅只能够打包JS模块了，其能够打包和识别如css、图片、字体文件等任何格式的文件。
