webpack的基本使用

发表于 | 分类于 | 阅读次数:

个人接触前端并不是很久，对于webpack却是久仰大名，也难怪， 作为一款优秀的模块加载器兼打包工具，webpack近来风头可谓一时无二，自己也想着学习并希望能够了解其工作方式和理念，抛开跟风不谈，至少学习新的技术对自己是大有裨益的。

webpack

引用一张webpack官网的图片，作为一款模块打包器，webpack负责分析模块间的依赖关系，随即将模块按照不同的加载器规则生成相对应的资源。我们需要模块化工具为我们做的，包括初始加载量少，按需加载，自定义打包逻辑等功能功能，webpack都能够满足，它的loader加载器可以将各种类型的资源转换成我们所需要的模块，其丰富的插件系统也让我们自定义需求。

安装

1
2
3
4
5
6
7
8
//node 环境自不必多说
//全局安装webpack
npm install -g webpack
//进入项目目录
//生成package.json
npm init
//安装webpack依赖
npm install webpack --save-dev

基本使用

1
2
3
4
5
6
7
8
9
10
11
//静态页面：index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webpack</title>
	</head>
	<body>
		<script type="text/javascript" src="bundle.js" ></script>
	</body>
</html>
1
2
//JS文件入口：entry.js
document.write("Hello world. ")

编译 entry.js 并打包到 bundle.js,于命令行输入

1
webpack entry.js bundle.js

随即你会看到命令行会显示日志，提示你打包成功，打开浏览器运行index.html，你会看到Hello world.

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var webpack=require("webpack");
module.exports={
	//页面入口设置
	entry:"./entry.js",
	//入口文件输出配置
	output:{
		path:__dirname,
		filename:"bundle.js"
	},
	module:{
		//加载器配置
		loaders:[
          //加载器可以使用简称例如style,其具体规则可见webpack的resolveLoader.moduleTemplates api
          //.css 文件使用style-loader和css-loader加载器来处理
          { test: /\.css$/, loader: 'style-loader!css-loader' },
           //图片文件使用url-loader加载器来处理，小于8kb的话则转换成base64
		  { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
		]
	},
	//插件项配置
	plugins:[
 		//为bundle.js头部添加注释信息     
		new webpack.BannerPlugin("this file is created by cala")
	]
}

webpack.config.js配置基本上存在于每一个使用webpack项目中，作为一个配置项，告诉webpack它的具体功能，包括加载器作用与插件项的功能，所有的加载器都是通过npm来加载，可以阅读相应的文档来了解不同加载器所提供的功能。

执行

1
webpack --watch

启动监听模式，如此便可以避免在每次修改模块后都重新编译，开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译

1
npm install webpack-dev-server -g

使用webpack-dev-server构建本地服务器，在浏览器输入localhost：8080会以监听模式自动运行webpack

关于webpack其实还有很多令人惊奇的地方，看官方文档可以知道很多关于webpack的工作原理或者是其相关的周边生态，道阻且长，也希望自己能够不断的学习新的技术，未来能够用于项目中，更深的体会其原理跟奥妙。