好多人在刚开始学习了webpack之后,可能对于webpack是什么?怎么用多少会有些迷茫,下面是我的学习心得,希望能帮助到大家,有不足之处,也欢迎提出共同来讨论。
webpack的特点
- 模块化
webpack会把一切视为模块,而模块化的文件会十分灵活,且容易调试以及升级,webpack会让人有种工程化的意识。
- 压缩和打包
有人会说webpack就是为js打包而生的,其他的功能也是后来才加上去的,所以webpack更注重打包,也就是说文件打包功能更加强大。此外,现在的webpack不仅能给js文件打包,css文件等等都可以,至于如何实现我们后面会提到。它还可以预编译文件等等。
webpack的安装
- npm 形式安装
$npm install webpack -g
- 也可以直接安装到项目的依赖里
npm init
npm install webpack -save-dev
配置webpack.config.js
what is entry point (入口文件)
模块打包的起点称之为入口文件。入口文件会告诉webpack从哪里开始打包和遵循着什么依赖关系进行打包。是你app第一个启动的文件。
实例
- 建立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
module.exports = {
entry: "./main.js",
output: {
filename: 'bundle.js'
}
};
安装live-server,
npm install live-server -g
感受一下吧。
当然这里是基本的东西。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。