webpack简介
webpack是基于模块化开发的一个工程化开发工具,因此在webpack中,任何资源(图片、css等等)都可以作为模块加载进来(当然加载的时候需要一些load加载机)。
这个工具的模块化规范基于commojs的,也支持amd,cmd规范,但是建议我们使用commomjs规范,因此我们可以像书写node一样书写项目。
Webpack是由react推动的(react文件都是由webpack编译的),因此react相关的demo很多都是基于webpack实现的,所以对于react的相关处理插件,webpack是最丰富的。当然gulp插件也是可以处理react的。
- webpack安装:npm install –g webpack
- 查看版本号:webpack –v
使用webpack处理项目,跟gulp一样,都需要一个配置文件,文件名称为webpack.config.js,我们在这个文件中,定义我们的功能,我们通常将配置定义在暴露的接口中,如下所示:
module.exports = {
// 在这里定义配置
// 定义入口文件
entry:'./js/app.js',
// 定义文件的发布位置
output:{
path:'/demo',
filename:'dist.js'
}
}
- Entry定义文件入口,可以是一个字符串,表示一个入口文件,也可以是一个对象,表示多个入口文件。
- Output定义文件发布的位置是一个对象。
- Path:定义发布文件的目录,如果不定义该属性,路径可以写在filename属性中。
- Filename:定义发布文件地址(通常与上面定义的entry对应)。
- 当entry定义成对象的时候,(此时入口文件有多个,我们要将filename定义成)[name].js
举一个小例子
文件目录如下:
|__js
|__head.js
|__foot.js
|app.js
| index.html
|__webpack.config.js
head.js
module.exports = function () {
console.log('head module')
}
foot.js
module.exports.say = function () {
console.log('foot say function')
}
app.js
var head = require('./head')
var foot = require('./foot')
head();
foot.say();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义个webpack入口文件-->
<script type="text/javascript" src="demo/dest.js"></script>
</body>
</html>
webpack.config.js
module.exports = {
// 在这里定义配置
// 定义入口文件
entry:'./js/app.js',
// 定义文件的发布位置
output:{
path:'/demo',
filename:'dest.js'
}
}
输入webpack命令,就可以生成demo/dest.js文件
可以看到dest.js文件把所有的模块都打包到了一个js文件中,在引用的过程中类似于本地模块加载,所以可以采用require的方式进行模块引用。
入口设置为多个文件
js
|__head.js
|__foot.js
|__app.js
|__app1.js
index.html
webpack.config.js
app1.js
var head = require('./head')
head();
console.log("Hello, I'am app1");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义多个webpack入口文件-->
<script type="text/javascript" src="gulp/dest.js"></script>
<script type="text/javascript" src="gulp/dest1.js"></script>
</body>
</html>
webpack.conf.js
module.exports = {
// 在这里定义配置
// 此时定义的entry是一个对象,入口为多个文件
entry:{
dest:'./js/app.js',
dest1:'./js/app1.js'
},
output:{
filename:'./gulp/[name].js'
}
}
配置还是非常简单的:)
前面我们提及的都是webpack的本地发布,如何在服务器上发布呢?
Webpack中有一个插件,提供了服务器服务,通过这个服务器,我们可以预览我们的项目,webpack-dev-server
- 安装插件: npm install –g webpack-dev-server
- 查看版本号: webpack-dev-server -v
直接进入项目目录,执行webpack-dev-server指令,将项目发布到服务器上。