内容概述
目录
webpack的安装#webpack%E7%9A%84%E5%AE%89%E8%A3%85
认识webpack
什么是webpack?
我们先看看官方的解释: At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
但是它是什么呢?用概念解释概念,还是不清晰。
我们从两个点来解释上面这句话:模块 和 打包
一、模块
前端模块化: 在前面学习中,我已经用了大量的篇幅解释了为什么前端需要模块化。
而且我也提到了目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6。
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用(在后续我们会看到)。 这就是webpack中模块化的概念。
二、打包
打包如何理解呢? 理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)
但是打包的操作似乎grunt/gulp也可以帮助我们完成,它们有什么不同呢?
webpack的安装
首先我们需要知道,webpack的运行需要node环境的支持,而npm是node环境中的一个软件包管理工具(node packages manager)
查看自己的node版本:
全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本)
webpack的起步
我们创建如下文件和文件夹:
dist文件夹:用于存放之后打包的文件 src文件夹:用于存放我们写的源文件
main.js:项目的入口文件。具体内容查看下面详情。
mathUtils.js:定义了一些数学工具函数,可以在其他地方引用,并且使用。具体内容查看下面的详情。
index.html:浏览器打开展示的首页html
main.js:
const {add,mul}=require('./mathUtils')
console.log(add(20, 30));
console.log(mul(10, 80));
import * as aaa from './info'
console.log(aaa.name);
console.log(aaa.height);
console.log(aaa.age);
mathUtils.js
function add(num1,num2){
return num1+num2
}
function mul(num1,num2){
return num1*num2
}
module.exports={
add,
mul
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
可以看到,我们在index.html文件中并没有引用我们的mathUtils.js,且我们的main.js文件中导入了mathUtils.js文件,可是我们却引用了一个bundle.js的文件,那么这个bundle.js文件是哪里来的呢?
这个bundle.js文件正是我们使用webpack打包main.js得来的
在我们的terminal终端中输入这么一条语句 webpack ./src/main.js ./dist/bundle.js
这条语句的意思是将我们的 ./src/main.js文件打包成bundle.js文件并存放在dist文件夹中
注意!首次安装webpack的同学们可能会遇到脚本禁止运行的错误,此时重启我们的电脑,以管理员身份打开我们的编译软件,并在终端先输入Set-ExecutionPolicy RemoteSigned使我们的脚本可以正常运行,随后再输入我们的webpack ./src/main.js ./dist/bundle.js
此时打开我们的index.html,发现我们的index页面可以打印出我们所需要的语句
webpack的配置
入口和出口
我们考虑一下,如果每次使用webpack的命令都需要写上入口和出口作为参数