Webpack：基础使用

1. 准备工作

创建dist和src文件夹
dist文件夹: 用于存放之后打包的文件
src文件夹 ：用于存放我们写的源文件

index.html ：主运行html
自定义以下三个js文件做测试
main.js：入口文件
common.js：用CommonJS语法规范的模块化文件
ES6.js：用ES6语法规范的模块化文件

common.js

let name = 10;
function add(x, y) {
  return x + y
}

module.exports = {
  name, add
}

ES6.js

let name = 'xy';
let age = 20;
function eat() {
  return '快去吃饭吧！'
}
export {
  name, age, eat
}

main.js中按各自语法引用

let { name, add } = require('./common.js')
import * as es6 from './ES6.js'
console.log(1);

console.log(name);
console.log(add(1, 2));

console.log(es6.name + ' ' + es6.age + ' ' + es6.eat());

2. 使用webpack

右击当前文件夹打开文件夹集成终端

输入以下指令

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

这里是将入口文件打包到bundle.js文件中

此时dist新生成bundle.js文件

3. 运行

在index.html中引用bundle.js

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

然后运行index.html，输出结果即成功