webpack-1

webpack笔记-1

定义

webpack是一个现代的JavaScript应用的静态模块打包工具
核心：模块和打包

AMD CMD CommonJS 需要低层支持
webpack可以处理模块化开发，CSS、图片、json文件都可以被当作模块来使用。
grunt/gulp更强调的前端流程的自动化，模块化不是它的核心
webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，都是它的附带功能，依赖node环境。
node环境为了可以正正常执行很多代码，必须其中包含各种依赖的包（npm）
最终打包在dist文件夹中
程序主要在src文件中，用模块化的方式开发

首先创建主要的文件夹

main.js主要负责导入模块 info.js 和 mathUtils.js 负责导出模块

main.js代码 导入

//使用commonjs规范 模块化
const {add,mul} = require('./mathUtils.js')

console.log(add);
console.log(mul);

//使用es6的模块化规范
import {name,age} from "./info.js"
console.log(name);
console.log(age);

mathUtils.js代码：（commonjs模块化规范）导出

function add(num1,num2){
    return num1+num2;
}

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

module.exports = {
    add,
    mul
}

info.js代码：（es6模块化规范）导出

export const name = 'nike'
export const age=12

提前已经安装好webpack，此时在终端运行

会将模块打包到dist文件夹下的dundle.js文件夹中
在index.html中导入dundle.js

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

最后运行html文件

over 入个门