如果没有安装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(); })打包过程:
然后在.html文件中直接用 require引入.打包产物.
如何安装webpack并进行打包
确保你已经安装了node.js,安装好了,你会看到如下图,我们需要的小黑框的,
1.从小黑框进去,在你期望的盘下,新建一个文件夹, 并使用命令初始化这个文件夹: npm init, 这个命令执行的时候,一路选择默认就好, 就会在在这个文件夹下生成下面这个文件还有一些json文件,如果报错,可能是你的文件路径没有权限, 右键文件夹-属性-安全(修改用户权限):
2. 在这个文件夹下全局安装webpack. 使用命令: npm install -g webpack
3.进入开发模式: webpack --mode development.为什么要进行这一步呢? 原因是我们要测试打包功能是否好用,是否配置成功,
所以我们会使用默认打包的形式进行测试, 不过不是一条龙服务, 这一步会报错, 因为webpack --mode developmen就会以默
认路径进行打包,入口文件是./src/index.js.也就是它会因为这个命令去自动打包src文件夹下的index.js文件, 但我们生
成的文件夹,只有node_modules和一些json文件,并没有src这个文件夹,这时候就需要手动创建,并且在src文件夹中新建一
个index.js文件.src文件和node_modules是同级的.
如:
index.js中
最后:找到package.json,添加下面的两条内容,这是因为 webpack --mode development太长了,你每次想默
认打包,你需要输入好多(有开发模式和生产模式两种),就给起个别名,如下图进行配置:
然后输入:
webpack --mode development:这是默认打包命令,如果报错,则说明打包功能目前没有配置好,需要你找出原因进行修正,
报错的一些问题在我前一篇博客中已经给出解决办法,就是不知道问题是否一直, 需要根据报错内容查找原因, 慕课网上报错的问题跟我的问题并不一样, 因为版本不同. 如果不报错了,那么你就可以尝试进行打包了,
出现下面的样子,说明你可以使用打包这个功能了,已经配置好了,如下图:
4.执行命令: webpack test.js -o test.bundle.js 尝试进行打包
test.js:是你要进行打包的文件
test.bundle.js:是你期望打包生成的文件名,打包完成后还是一个js文件
如下图:
因为test使用require引入了demo.js模块, 因此 这个生成的test.bundle就会有两个模块,一个是它自己本身的,还有一个是导入的demo模块.
你就会看到自动生成的test.bundle.js文件,如下图:
这就说明你打包成功了!