安装
1. 全局安装命令:cnpm install weback -g
2. 安装webpack-cli:
cnpm install -D webpack-cli
webpack-cli 是用来在控制台运行webpack命令的工具
传概念
使用
新建demo01 文件夹,并在该文件文件夹下面创建app和public两个文件夹,和webpack.config.js
如下:
2.生成package.json文件:cmd 进入到demo01文件夹
执行:cnpm init,回答一些问题之后
生成package.json 这个是一个最为进本的文件
app 文件夹下面创建两个js文件,分别为entry.js 和greet.js
greet.js
function greet(){
var divEle=document.createElement("div");
divEle.innerHTML="hello,webpack";
return divEle;
}
module.exports=greet;
entry.js
var greet=require("./greet.js");
document.getElementById("container").appendChild(greet());
public 文件夹下面创建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" rel="stylesheet" src="./bundle.js"></script>
</body>
</html>
webpack.config.js 文件内容如下:
module.exports={
entry:__dirname+"/app/entry.js", //入口文件
output:{
path:__dirname+"/public", //输出文件的存放位置
filename:"bundle.js" //输出文件的名称
}
}
执行webpack:
public 文件夹下面生成bundle.js
浏览器打开index.html
希望对你有所帮助
原文地址: