element ui框架（webpack打包器）_打包后的element ui框架放在哪里

作者：寸_铁 | 2024-06-21 22:51:54

踩

打包后的element ui框架放在哪里

在前端开发中一般会用到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("<div>Hello world</div>")
}

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("<div>Hello world</div>")}}},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，

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/744498