持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
Webpack主要是可以将多种静态资源（js、css、less）转换成一个静态文件，减少了页面的请求。今天就来简单给大家介绍下，Webpack 的安装与使用
安装&初始化
//全局安装
npm install -g webpack webpack-cli
//初始化创建文件夹，进入目录执行命令，src下创建`common.js`、`utils.js`、`main.js`
npm init -y
exports.info = function (str) {
document.write(str);
}
exports.add = function (a, b) {
return a + b;
}
const common = require('./common');
const utils = require('./utils');
common.info('hello world' + utils.add(100, 200));
（举例参考大佬的例子：https://blog.csdn.net/qq_42950328/article/details/106488198?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166489370516800182127161%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166489370516800182127161&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-106488198-null-null.142^v51^new_blog_pos_by_title,201^v3^control_2&utm_term=webpack&spm=1018.2226.3001.4187 ）
实现打包（以js文件举例）
- 读取project目录下src文件夹中的
main.js内容 - 分析资源依赖，把相关的js文件打包
- 将已经打包好的文件放入当前目录的dist文件夹下，打包后的js文件名为
bundle.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
命令行执行编译命令
"scripts": {
//...,
"dev": "webpack --mode=development"
}
npm run dev
//运行npm命令执行打包
创建index.html，引用命名好的输出文件bundle.js
<body>
<script src="dist/bundle.js"></script>
</body>
//webpack目录下创建`index.html`
最后就是在浏览器中查看index.html啦～
【写在最后】
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
