什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
开始使用webpack
webpack可以使用npm安装,新建一个空的文件夹(此处命名为webpackTest),在终端中转到该文件夹后执行下述指令就可以完成安装。
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install –save-dev webpack
1、在上述文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件
npm init
2、package.json文件已经就绪,我们在本项目中安装webpack作为依赖包。
//安装webpack
npm install –save-dev webpack
3、回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的Javascript模块,public文件夹用来存放之后供浏览器读取文件(包括使用webpack打包生成的js文件以及一个index.html文件),接下来我们再创建三个文件夹
index.html –放在public文件夹中;
Greeter.js –放在app文件夹;
main.js –放在app文件夹中;
我们再html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包的js文件命名为bundle,js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebpackTest</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
我们在Greeter,js中定义一个返回包含信息的Html元素的函数,并依据CommonJS规范导出这个函数为一个模块:
module.exports = function(){
var greet = document.createElement('div');
greet.textContent = 'hello world';
return greet;
}
main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。
const greeter = require('./Greeter');
document.querySelector('#root').appendChild(greeter())
正式使用webpack
webpack可以在终端中使用,在基本的使用方法如下:
webpack {entry file} {destination for bundled file}
结果报错:
之所以报错是因为我的打包命令是:
webpack app/main.js public/bundle.js 这是旧版本打包方式,新版本打包应该这样:
webpack app/main.js -o public/bundle.js
上面的警告信息是没有设置模式,我们可以设置webpack –mode development/production进入开发模式或生产模式。
最终的在开发模式下打包命令是:
webpack –mode development app/main.js public/bundle.js
可以看出webpack同时编译了main.js和Greeter.js,现在打开index.html,可以看到如下结果:
到此我们已经成功使用webpack打包一个文件了。不过在终端中进行复杂的操作,其实是不太容易且容易出错的,接下来看看webpack另一种更常见的使用方法。
使用配置文件来使用webpack
webpack拥有很多比较高级的功能,一般我们可以把它们定义在一个配置文件中。在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,目前的配置主要涉及到的内容是入口文件和打包后的文件存放路径。
有了这个配置之后,再打包文件,只需在终端里运行webpack命令就可以了,是不是简单了很多。
更快捷的执行打包任务
npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令。在package.json中对script对象进行相关设置即可,设置如下:
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.1"
}
}
现在我们就可以使用npm start打包文件了。