1.什么是webpack?
(前端模块化打包工具)
从本质上 来讲,webpack是一个现代的JavaScript应用的静态模块打包
工具
但是它是什么呢?
我们从两个点来解释:模块 和 打包
1.1前端模块化
目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件,我们的css、图片、json文件等等在webpack中都可以被当做模块来使用。
这就是webpack中模块化的概念
1.2打包
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包过程中 ,还可以对资源进行处理,比如压缩图片、将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。
2.webpack安装
安装webpack
首先需要安装Node.js
,Node.js
自带了软件包管理工具npm
查看自己的node版本
node -v
全局安装webpack(这里先指定版本号3.6.0,因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g
局部安装webpack
--save -dev
是开发时依赖,项目打包后不需要继续使用的。
为什么全局安装后,还需要局部安装呢?
1.在终端直接执行webpack
命令,使用的全局安装的webpack
2.当在packaage.json
中定义了scripts
时,其中包含了webpack
命令,那么使用的是局部webpack
3.webpack的基本使用
目录结构
dist:存放打包后文件的目录
src:存放需要打包文件的目录
打包命令:
webpack ./src/main.js ./dist/bundle.js
main.js
//1.使用commonjs的模块化规范
const {add,mel} = require('./mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './info';
console.log(name);
console.log(age);
console.log(height);
打包成功后:(且在dist文件夹下生成bundle.js文件)
因为在main.js中引入其他js,所以在打包时会自动对所有依赖的文件进行打包合并。