1、webpack介绍:
webpack是一个现代的JavaScript应用模块打包器(module bundler),它能把各种资源,例如JS(含JSX)、coffee、样式(less/sass)、图片等都作为模块来处理和使用。它可以部分代替Grunt和gulp的功能。
2、webpack的安装
常规直接使用npm的形式来安装:
1
|
$npm
install
webpack
-
g
|
npm 是Node.js的包管理工具,这个我就不作过多的解释了, 这个命令就是:全局安装webpack, -g 是全局安装的意思。
我们还可以直接安装到项目的依赖里,也就是写入package.json
1
2
|
npm
init
npm
install
webpack
--
save
-
dev
|
3、配置文件webpack.config.js
按照常规来说,每个项目下都应该配置有webpack.config.js文件,它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一样,就是一个配置项,告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。
重点:什么是入口文件?模块打包的起点称之为入口起点(entry point)。入口起点告诉webpack从哪里开始,并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文(contextual root)或app第一个启动文件。
4、我们来作一个实例(Hello World!)
- 建立index.html文件
- 建立main.js文件
- 建立webpack.config.js文件
- 安装live-server 并预览程序
index.html
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<title>
</title>
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
|
main.js
1
|
document
.
write
(
"<h1>Hello World</h1>"
)
;
|
webpack.config.js
1
2
3
4
5
6
|
module
.
exports
=
{
entry
:
"./main.js"
,
output
:
{
filename
:
'bundle.js'
}
}
;
|
安装live-server,只要用npm install就可以安装了。
1
|
npm
install
live
-
server
-
g
|