目录
文章目录
Webpack是什么
使用
新建工程
mkdir webpack-demo
cd webpack-demo
// 创建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打包
直接执行命令
webpack
最后的输出结果应该是这样的，在我们指定的/build文件中生成了一个bundle.js文件
webpack打包成功
浏览结果
使用浏览器打开index.html文件就可以查看结果啦
运行结果
