webpack的初步使用(隔行变色案例)

序言:使用webpack之前,首先你得安装上webpack。
通过 隔行变色 这个案例结合使用webpack。

第一步:

在我们项目中先创建一下目录结构,如图:
这里文件命名最好使用英文的(因为需要使用npm做特殊处理)
在这里插入图片描述
我们要实现列表的隔行变色,比较好的就是使用jQuery去实现。
但是我们没有jQuery的包,我们就通过npm去下载一个。
我们现在的命令行所在的路径应该是我们的WebpackStudy这个根目录文件夹。

第二步

代码结构如下:

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <ul>
        <li>1个li</li>
        <li>2个li</li>
        <li>3个li</li>
        <li>4个li</li>
        <li>5个li</li>
        <li>6个li</li>
        <li>7个li</li>
        <li>8个li</li>
        <li>9个li</li>
        <li>10个li</li>
    </ul>
</body>
</html>

第三步

1、项目在下载依赖之前,要进行初始化(快捷键ctrl+ shift + ~),运行命令:npm init -y
初始化后,我们就能看到一个package.json文件
2、然后下载我们的jQuery包。运行命令:npm i jquery
下载完成后,我们会发现项目中多了一个node_modules的文件夹,我们的jQuery包就在里面。
在这里插入图片描述
方法基本上是大同小异的,我们也可以利用这种方法,去下载bootstrap,animate.css等等。

这一次下载完成之后,如果说到后来我们不小心把node_modules文件夹删除,我们可以直接通过运行命令npm i,直接把我们以前下载过的包,都重新下载下来,版本还都是一致的。

第四步

我们一般把所有的文件都写到main.js里面,这样我们的页面在加载的时候,只需要加载一次main.js就行了。
main.js文件代码如下:

// 这是项目入口函数
// 导入jQuery
// es6导入其他模块方式 import *** from ***
// es6代码高级 浏览器解析不出来
import $ from 'jquery'

// const $ = require('jquery')
$(function(){
    $('li:odd').css('backgroundColor','yellow')
    $('li:even').css('backgroundColor',function(){
        return '#' + 'D97634'
    })
})


我们在html页面<script src="main.js"></script>即可。

但是我们会发现,这样打开浏览器运行时,是没有效果的,我们给的jquery代码好像并没有执行?
但这不是我们代码的问题。这是使用import $ from 'jquery'时,由于ES6的代码太高级了,浏览器解析不了,所以执行时会报错。

第五步

这时,我们就可以通过webpack把我们的main.js里的代码进行一下处理,运行命令:webpack ./src/main.js ./dist/bundle.js

**注意,如果你是weback4.0+的版本,那么你的命令中就必须带有“-o”:webpack ./src/main.js -o ./dist/bundle.js,“-o”代表输出文件。

webpack之后,是我们的main.js的路径,在main.js路径之后,是我们经过webpack处理后,把文件输出的路径以及名称。此时,在dist目录下会自动生成一个bundle.js的文件
在这里插入图片描述
此时,我们在html页面里,就不需要在引用main.js,引用我们的bundle.js:<script src="../dist/bundle.js"></script>,这样我们再去运行页面,就会发现成功了。

特别注意:webpack4.0+版本注意事项

我当时写的时候没有写“-o”,然后代码就报错了,因为我的webpack是4.0+版本。然后查了查资料发现是版本过高导致的错误。

在这里插入图片描述

经过演示 webpack可以做什么事情?
1、webpack能够处理JS文件互相依赖的关系。
2、webpack能够处理js的兼容问题,把高级的浏览器不识别的语法转为低级的浏览器能识别的语法。
刚才运行的命令格式 webpack 要打包的文件路径 打包好输出的文件路径。

在写这个案例的时候 值得注意 :如果你是weback4.0+的版本,那么你的命令中就必须带有“-o”:webpack ./src/main.js -o ./dist/bundle.js,“-o”代表输出文件。

第六步

1、简单使用了一下webpack打包,也有一个很大的问题,比如:我在main.js里面对表格的颜色做一下修改,我想把奇数行变成蓝色。
2、运行代码你会发现不行,没有效果,但是你或许也发现了问题的所在,我们改过的代码,没有经过webpack处理,所以没效果。
3、然后我们就需要再去运行一下webpack ./src/main.js ./dist/bundle.js???(4.0+版本别忘了“-o”)这样写的话太麻烦了。
4、我们会想,我能不能每次改完之后,不写这么长的命令,直接写个webpack就能打包就好了。办法是有的,不过我们需要一个配置文件:webpack.config.js

注意:webpack.config.js 要放在项目根目录下,如果放错地方,可以剪切到它根目录下(我当时就放错地方了,然后一系列报错)
在这里插入图片描述
然后你就可以更改你想换的颜色了,在控制板出输入:webpack,这时我们的打包就好了,打开浏览器就能看到你更改的颜色了。

PS:在错误中成长,加油!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值