element ui框架（webpack打包器）
Posted 嵌入式-老费
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element ui框架（webpack打包器）相关的知识，希望对你有一定的参考价值。
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】
在前端开发中一般会用到webpack打包器。虽然使用npm run build会自动调用webpack帮助我们打包，不过还是建议大家可以手动编写代码，看一下打包的过程究竟是怎么样的。
1、安装webpack、webpack-cli
npm install webpack webpack-cli -g2、创建一个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，
以上是关于element ui框架（webpack打包器）的主要内容，如果未能解决你的问题，请参考以下文章