webpack 与面向对象编程

luckybing~

于 2019-05-30 12:34:00 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/90694958

版权

webpack 是一个模块打包器

浏览器不认识import 语法，借助webpack来使用import

下面这个例子借助webpack可以让原生js像react、vue那样使用。使用面向对象的编程方式

示例：

项目构建: 安装webpack

cnpm i webpack-cli --save-dev

cnpm i webpack --save

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>webpack</title>
</head>
<body>
  <div id='root'></div>
  <script src='./js/index.js'></script>
</body>
</html>

js 文件夹下的index.js: 引入header、content、sidebar模块

import Header from './header.js'
import Content from './content.js'
import SideBar from './sidebar.js'

new Header()
new Content()
new SideBar()

content.js: 封装函数然后导出：

function Content() {
  var root = document.getElementById('root')
  var content = document.createElement('div')
  content.innerText = 'content'
  root.append(content)
}

export default Content

header.js:

function Header() {
  var root = document.getElementById('root')
  var header = document.createElement('div')
  header.innerText = 'header'
  root.append(header)
}

export default Header

sideBar.js:

function SideBar() {
  var root = document.getElementById('root')
  var SideBar = document.createElement('div')
  SideBar.innerText = 'SideBar'
  root.append(SideBar)
}

export default SideBar

现在运行网页index.html会报错的：因为浏览器不认识import ，使用webpack打包index.js文件～

npx webpack index.js

这时候项目里面会多了一个dist文件夹，下面有index.js打包好后的js～在index.html中引入main.js

<script src='./js/dist/main.js'></script>

然后运行网页～成功～

luckybing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 与面向对象编程

webpack 是一个模块打包器浏览器不认识import 语法，借助webpack来使用import下面这个例子借助webpack可以让原生js像react、vue那样使用。使用面向对象的编程方式示例：项目构建: 安装webpackcnpm i webpack-cli --save-devcnpm i webpack --saveindex.html:<!...
复制链接

扫一扫