尝试使用webpack进行打包

如果没有安装webpack,跳过前面,直接跳到本文后面的:"如何安装webpack并进行打包" , 安装和打包过程中会出现各种问题,这需要你亲自动手搜索答案进行解决,有些出现的问题,博客中我也有写出. 因为不同的人安装不同的版本出现的问题并不一样. 如果看不明白,推荐去看慕课网.但慕课网录视频用的webspack是旧版本,跟现在的有些差距. 命令会有一些不同,但是不要紧,这些都是可以通过大海捞针(百度)或者论坛下解决的.毕竟翻墙不容易. 如果出现问题,欢迎私信帮忙解决.

我尝试把自己之前写的JavaScript计时进行了打包.

demo3.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script type="text/javascript" src="js/require.js"></script>
        <!--谷歌浏览器无法加载配置文件-->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            require(["test.bundle.js"]);
        </script>
    </head>

    <body>
        <div>
            <span class="s1"></span>
            <button id="btn1">开始计时 </button>
            <button id="btn2">停止计时</button>
        </div>
    </body>

</html>

从上面的代码中,除了,require.js,jQuery.js 是以<script></script>形式进行加载js文件, 之前我们是这样加载我们自己写的JS文件的: <script type="text/javascript" src="demo.js" ></script>,现在使用模块化的形式,

 require(["test.bundle.js"]);//该句中的test.bundle.js是已经被我打包过后生成的JS文件,并不是test.js文件.

test.js(就是个中间人)

require("./demo.js")
alert("hello world!!!")

test.bundle.js(这是通过打包生成的)

demo.js(我们真正自己写的JS文件)

define(function() {
	function fu1() {
		$(function() {
		    var timer;
			var timekeeping = {
				start: function() {
					var b = 0;
					if(timer == null) {
						timer = window.setInterval(function() {
							b++;
							$(".s1").html(b);
							console.log(b);
						}, 1000);
					}
				},
				stop: function() {
					window.clearInterval(timer);
					timer = null;
				}

			};
			$("#btn1").on("click", function() {
				timekeeping.start();

			})
			$("#btn2").on("click", function() {
				timekeeping.stop();

			})

		})
	}
	fu1();
})

打包过程: