●首先新建一个项目文件夹命名为WebPack2
项目文件
●用SubLime将其打开并在该文件夹中创建app.js、index.html和webpack.config.js(webpack配置文件)
webpack.config.js
module.exports={
// 设置入口文件
entry:'./app.js',
// 设置编译输出后的文件名
output:{
path:__dirname,
filename:'bundle.js'
},
mode:'development'
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPack初体验</title>
</head>
<body>
<!-- 这里是webpack.config.js里指定的输出文件 -->
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
app.js
document.write('WebPack初体验');
接下来在该项目问价夹下打开命令行窗口用npm生成package.json
$ npm init --yes
package.json
{
"name": "WebPack2",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
接下来用npm下载webpack(这里用cnpm（淘宝镜像）下载比较快)
$ cnpm install webpack
下载成功后在项目文件夹里出现node_modules文件夹
node_modules文件夹
这时在命令行输入
$ webpack ./app.js
成功后出现bundle.js文件
bundle.js
将index.html用浏览器打开
最终效果