webpack学习笔记(2)

webpack的使用方式

• 自己手写配置
• webpack配置
• 第三方脚手架 Vue-Cli Angular-Cli React-Starter

webpack-cli 可以关注一下

cmd下 code ./ 直接打开VsCode

webpack的简单应用

新建两个js文件

sum.js

export default function (a,b){
    return a+b
}

app.js

import sum from './sum'
console.log("sum(10,20)"+ sum(10,20))

控制台输入webpack app.js bundle.js指定entry入口文件和出口文件

webpack app.js bundle.js

image.png

目录下就看到生成了一个bundle.js文件

image.png

这时再新建一个index.html文件，把生成的bundle文件引入进去

查看浏览器控制台输出,这样一个简单的webpack打包就完成了

image.png