02-02.Webpack - 模块打包工具

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

• index.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、图片、字体文件等任何格式的文件。

补充资料

• webpack文档 - 概念-模块
• webpack文档 - API-模块方法
• webpack文档 - API-模块变量