目錄
文章目錄
Webpack是什么
使用
新建工程
mkdir webpack-demo
cd webpack-demo
// 創(chuàng)建package.json
npm init -y
// 添加webpack
npm install --save-dev webpack
編寫Demo
新建/app/sum.js、/app/index.js祠汇、/index.html以及build文件目錄吕晌。
文件目錄如下
項目結構
/app中保存的是我們的js文件
/build是將來我們使用webpack打包后js文件的入口的路徑怠晴。
// sum.js
module.exports = function add(a, b) {
return a + b;
}
// index.js
var sum = require("./sum.js");
console.log(sum(1, 1));
最外層的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>app</title>
</head>
<body>
<div id="app" />
</body>
</html>
配置webpack
在根目錄下新建文件webpack.config.js
const path = require("path");
module.exports = {
entry : './app/index.js', // 入口文件
output : {
path : path.resolve(__dirname, "build"), // 必須使用絕對地址遥金，輸出文件夾
filename : "bundle.js" // 打包之后輸出的名字
}
}
使用webpack打包
直接執(zhí)行命令
webpack
最后的輸出結果應該是這樣的，在我們指定的/build文件中生成了一個bundle.js文件
webpack打包成功
瀏覽結果
使用瀏覽器打開index.html文件就可以查看結果啦
運行結果
