webpack基本配置及打包操作

来源：互联网发布：哪里有卖淘宝买家信息编辑：程序博客网时间：2024/05/21 23:53

1新建文件夹demo
2初始化package.json
npm init
3本地项目安装
// 安装Webpack
npm install --save-dev webpack
4创建测试文件及文件夹
-demo
--node_modules
--app
---Greeter.js
---main.js
--public
---index.html
--package.json
--webpack.config.js
5配置webpack.config.js
module.exports =
{

entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件

output: {

path: __dirname + "/public",//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名
}
}
6测试文件中写入内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
7命令行执行webpack打包生成build.js

阅读全文

0 0