webpack基本配置及打包操作

最新推荐文章于 2024-04-29 19:39:06 发布

原创最新推荐文章于 2024-04-29 19:39:06 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用Webpack进行项目构建，包括创建项目目录结构、初始化项目、安装Webpack、配置Webpack、编写测试文件并完成打包流程。

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