码迷,mamicode.com
首页 > Web开发 > 详细

weboack的简单使用(commonJs与es6)

时间:2020-05-24 23:50:23      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:mamicode   script   https   baidu   exp   bsp   const   ima   修改   

安装webpack

 npm install webpack@3.6.0 -g

一个commonJs简单实例

技术图片

1 mathUtils.js

function add(num1,num2){
  return num1+num2
}
function mul(num1,num2){
  return num1*num2
}

module.exports = {
  add,
  mul
}

2 main.js

const {add,mul} = require("./mathUtils.js")
console.log(add(20,30))

3 生成bundle.js文件

 webpack ./src/main.js  ./dist/bundle.js

技术图片

4 在index.html里引入

 <script src="./dist/bundle.js"></script>

5 结果

技术图片

一个es6的简单实例

 1 创建info.js

技术图片

let name = ‘why‘
let age = ‘18‘
let height  = 1.88
export {name,age,height}

2 修改main.js

将info.js导入 es6可以将.js省略

const {add,mul} = require("./mathUtils.js")
console.log(add(20,30))
//以下为es6的写法
import {name,age,height} from ‘./info‘
console.log(name)

3 重新打包

技术图片

4 结果

技术图片

源代码链接: https://pan.baidu.com/s/162ZOLc3x90IIgTy8VEx65g 提取码: kjqw

weboack的简单使用(commonJs与es6)

标签:mamicode   script   https   baidu   exp   bsp   const   ima   修改   

原文地址:https://www.cnblogs.com/polax/p/12953262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!