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

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

补充资料

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容