webpack的初步使用（隔行变色案例）

最新推荐文章于 2022-02-21 21:24:45 发布

M@圆

最新推荐文章于 2022-02-21 21:24:45 发布

阅读量352

点赞数 1

本文链接：https://blog.csdn.net/MMY_L/article/details/105248323

版权

序言：使用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：在错误中成长，加油！

M@圆

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack的初步使用（隔行变色案例）

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

扫一扫