Vue学习笔记 5 - webpack 安装/文件配置

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;