• element ui框架（webpack打包器）

    【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

            在前端开发中一般会用到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文件的内容如下所示，

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

    4、继续创建main.js文件

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

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

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

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

    1. module.exports = {
    2. 	
    3. 	entry: "./modules/main.js",
    4. 	output: {
    5. 		filename:"./js/bundle.js"
    6. 	},
    7. 	watch:false
    8. 	
    9. }

    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文件，内容如下，

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title> webpack测试 </title>
    7. 	</head>
    8. 	<body>
    9. 		<script src="./dist/js/bundle.js"></script>
    10. 	</body>
    11.  
    12. </html>

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

     

  • 相关阅读:
    emq Neuron工业协议采集使用
    StarRocks实战——云览科技存算分离实践
    传输线的阻抗和反射到底是什么关系？
    K8S安装过程八：Kubernetes Master 节点安装
    Spring - 框架相关内容2
    Web开发 前端介绍 HTML CSS
    Scala 的安装教程
    （74）MIPI DSI LLP介绍（十四）
    贪心算法之单源最短路径
    Qt 打包发布程序，解决找不到msvcp140.dll等动态库问题正确方案
  • 原文地址：https://blog.csdn.net/feixiaoxing/article/details/126906654