webpack的起步
起步
新建一个文件夹，新建如下结构的目录：
**目录结构**
如图所示在src文件夹（源码文件夹），dist（要发布的文件，已经处理过的）。
**1.新建入口js文件`main.js`和`mathUtils.js`，`main.js`依赖`mathUtils.js`。**
> mathUtils
```javascript
//1.新建mathUtils.js，用CommonJs规范导出
function add(num1,num2) {
return num1+num2
}
function mul(num1,num2) {
return num1*num2
}
module.exports = {
add,mul
}
```
> main.js
```javascript
//2.新建入口js文件main.js 导入mathUtil.js文件，并调用
const {add,mul} = require("./mathUtils.js")
console.log(add(10,20))
console.log(mul(10,10))
```
**2.使用webpack命令打包js文件**
> 注意：webpack3使用`webpack ./src/main.js ./dist/bundle.js`
>
> webpack4，webpack打包在01-webpack的起步目录下打开终端 `webpack ./scr/main.js -o ./dist/bundle.js`
我全局安装的是webpack@3.6.0，所以在根路径执行
> bundle.js
```javascript
//2.新建入口js文件main.js 导入mathUtil.js文件，并调用
const {add,mul} = __webpack_require__(1)
console.log(add(10,20))
console.log(mul(10,10))
/***/ }),
/* 1 */
/***/ (function(module, exports) {
//1.新建mathUtils.js，用CommonJs规范导出
function add(num1,num2) {
return num1+num2
}
function mul(num1,num2) {
return num1*num2
}
module.exports = {
add,mul
}
```
内容很多，其中包含mathUtils.js和main.js 内容，打包成功。
**3.新建一个index.html文件，导入bundle.js**
```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>
<!-- 3.新建一个indexhtml文件并使用 webpack ./src/main.js ./dist/bundle.js webpack3使用此命令 -->
<!-- 4.引用webpack打包后的js文件 -->
<script src="./dist/bundle.js"></script>
</body>
</html>
`
**4.新建一个`info.js`使用ES6的语法导出**
> info.js
```javascript
//es6语法导出
export default {
name:'zzz',
age:24,
}
```
> main.js导入info.js
```javascript
//使用es6语法导入
import info from './info.js'
console.log(info.name)
console.log(info.age)
```
> 再次使用`webpack ./src/main.js ./dist/bundle.js`，重新打包
**5.打开index.html测试**
> 总结
webpack可以帮我们打包js文件，只要指定入口文件（main.js）和输出的文件（bundle.js），不管是es6的模块化还是CommonJs的模块化，webpack都可以帮我们打包，还可以帮我们处理模块之间的依赖。
浙公网安备 33010602011771号