webpack
前面我们学习了为什么前端需要模块化,并且提到目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6。
在 ES6 之前,我们必须借助其他工具来进行模块化开发,开发完成后还需要处理模块间的各种依赖,并将其进行整合打包。
webpack 其中一个核心就是让我们可能进行模块化开发,并帮助我们处理模块间的依赖关系。
而且不仅是 JavaScirpt 文件,我们的 CSS、图片、json 文件等在 webpack 中都可以被当做模块来使用。
和 grunt/gulp 的对比
全局安装 webpack
参考链接:webpack macOS 安装
准备工作
新建一个项目,最终目录结构如下:
文件和文件夹解析:
- dist文件夹:用于存放之后打包的文件
- js文件夹:用于存放我们写的源文件
- mathUtils.js:定义了一些数学工具函数,可以在其他地方引用及使用
- main.js:项目的入口文件
- index.jsp:浏览器打开展示的首页jsp
- package.json:通过 npm init 生成的,npm 包管理的文件(暂时用不上,后面才会用上)
基本使用过程
main.js
:
// 使用 CommonJS 的模块化规范
const {
add, mul} = require("./js/mathUtils.js");
console.log(mul(10, 3));
// 使用 ES6 的模块化规范
import {
name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,mul
}
info.js
:
export const name = 'puppy';
export const age = 6;
export const height = 55;