之前项目一直用百度的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文件,该文件是页面打包后的js

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<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作为入口js

1
console.log("测试webpack!");

配置webpack

webpack需要配置文件,配置文件标明了所需js,css等文件的打包和输出,在根目录下新建webpack.config.js,内容:

1
2
3
4
5
6
7
module.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。