webpack-前端模块化打包工具

• webpack:是用于现代Javascript应用程序的静态模块打包工具

前端模块化：

• 使用前端模块化的一些方案：AMD,CMD,Commonjs,ES6等

• 在ES6之前，想要进行模块化开发，必须借助其他的工具，让我们可以进行模块化开发，并且在模块化开发完成项目后，还需要处理模块间的各种依赖，并且将其进行整合打包

• webpack可以将这些浏览器不能识别的代码转化成浏览器可以识别的js代码，并且会帮助我们处理模块间的依赖关系

和grunt/gulp的比较

• grunt/gulp更加强调流程的自动化，模块化不是他的核心

• webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能

webpack的基本使用

1. 使用commonjs的模块化规范

//main.js
const {add,mul} = require('./mathUtils.js')

console.log(add(20,30));
console.log(mul(20,30));

//mathUtils
function add(num1,num2) {
  return num1 + num2
}

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

module.exports = {
  add,mul
}

输入webpack ./src/main.js ./dist/bundle.js命令

使用webpack打包，会自动生成bundle.js文件

引入bundle.js

2. 使用ES6的模块化规范

//info.js
export const name = 'why'
export const  age = 18
export const height = 190

//main.js
import {name,age,height} from "./info";

console.log(name);
console.log(age);
console.log(height);

输入webpack ./src/main.js ./dist/bundle.js命令

使用webpack打包

浏览器成功解析。