webpack入门教程
之前项目一直用百度的fis,功能非常齐全,对于最近比较流行的webpack
还比较陌生,体验一下前段工程化的不同之处,目前貌似使用Vue
框架的都在使用webpack
,很多项目基本都是这么模式:Vue
+webpack
+ES6
。
全局安装webpack
1 | npm install webpack -g |
安装后可用webpack -h
命令,执行查看webpack提供的所有命令1
webpack -h
新建项目
新建一个项目文件夹testwebpack,终端cd到该目录执行初始化项目命令:1
npm init -y
带上-y
表示yes,省去了一步步的询问步骤,直接初始化,这时空的项目文件夹下会有个package.json文件。
在当前项目下安装webpack
执行:1
npm install webpack --save-dev
安装完毕后,此时项目文件夹下多出了node_modules
文件夹。
新建测试用例
1.项目根目录下新建index.html
页面中先引入bundle.js文件,该文件是页面打包后的js1
2
3
4
5
6
7
8
9
10
11
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack入门教程</title>
<script src="./bundle.js"></script>
</head>
<body>
test webpack!
</body>
</html>
2.新建main.js作为入口js1
console.log("测试webpack!");
配置webpack
webpack需要配置文件,配置文件标明了所需js,css等文件的打包和输出,在根目录下新建webpack.config.js
,内容:1
2
3
4
5
6
7module.exports = {
entry: './main.js', // 所需js
output: {
path: __dirname, // 输出文件路径
filename: 'bundle.js' // 输出文件名称 已经在index.html中引用
}
}
初次打包
此时执行命令:1
webpack
执行后,项目中自动生成打包后的bundle.js
文件。如果顺利,项目文件夹下的文件依次为:
.
├── bundle.js
├── index.html
├── main.js
├── node_modules
├── package.json
└── webpack.config.js
如果出什么差错,需要重装node_modules的话,推荐一道一步到位的命令:1
rm -rf node_modules && npm cache clean && npm install
预览:安装webpack-dev-server
执行命令:1
npm install webpack-dev-server -g
安装完server服务后执行:1
webpack-dev-server
此时打开浏览器,输入地址 http://localhost:8080/webpack-dev-server/ 即可看到index页面,查看源码即可看到压缩后的js。