element ui框架（webpack打包器）

在前端开发中一般会用到webpack打包器。虽然使用npm run build会自动调用webpack帮助我们打包，不过还是建议大家可以手动编写代码，看一下打包的过程究竟是怎么样的。

1、安装webpack、webpack-cli

npm install webpack webpack-cli -g

2、创建一个webpack目录

因为这里只是测试一下webpack的用法，本身用不到vue。所以这里就不再需要用vue init创建工程代码了。

3、创建hello.js文件

在webpack目录下面再创建一个modules目录，hello.js文件就是放在这个modules目录下面。其中hello.js文件的内容如下所示，


exports.sayhi = function(){
	document.write("Hello world
")
}

4、继续创建main.js文件

在modules目录下面继续创建main.js文件，内容如下所示，


var hello=require("./hello")
hello.sayhi()

5、接着准备webpack.config.js文件

有了hello.js和main.js之外，下面就可以准备webpack.config.js文件了。这个文件是为webpack命令准备的，文件本身和modules目录在同一层，内容如下，


module.exports = {
	
	entry: "./modules/main.js",
	output: {
		filename:"./js/bundle.js"
	},
	watch:false
	
}

6、输入webpack命令

输入命令后，不出意外，就可以看到一个dist目录。dist/js目录下面有一个bundle.js文件，这就是压缩好的文件。内容本身已经不好辨认了。

(()=>{var r={645:(r,o)=>{o.sayhi=function(){document.write("Hello world
")}}},o={};(function t(e){var i=o[e];if(void 0!==i)return i.exports;var n=o[e]={exports:{}};return r[e](n,n.exports,t),n.exports})(645).sayhi()})();

7、准备index.html文件

为了验证压缩后的bundle.js是否可以真正运行起来，可以准备一个index.html文件。在html文件中引用这个bundle.js文件，内容如下，


<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title> webpack测试 </title>
	</head>
	<body>
		<script src="./dist/js/bundle.js"></script>
	</body>
 
</html>

8、用firefox或者chrome打开index.html，

相关阅读:
学信息系统项目管理师第4版系列32_信息技术发展
数据库-范式
【手写数据库toadb】表relation访问实现概述，分层设计再实践，表访问层与表操作层简化代码复杂度
python --- 蓝桥杯
ProCAST一键导出有限元模型的几何拓扑和属性信息
redis(0)-安装实操
【2022.11.16】Lammps+Python+MATLAB在绘制维诺图时遇到的问题
MySQL8 设置自动创建时间和自动更新时间
【mysql学习笔记30】锁（非教程）
高并发场景下更新数据库报错，记录一次 MySQL 死锁问题的解决

原文地址：https://blog.csdn.net/feixiaoxing/article/details/126906654