Webpack3.X版本使用指南(一)

最新推荐文章于 2022-10-01 14:48:40 发布

@带甜味的盐@

最新推荐文章于 2022-10-01 14:48:40 发布

阅读量561

点赞数 1

分类专栏：前端 SYW 文章标签： webpack使用 npm下载依赖

本文链接：https://blog.csdn.net/s_y_w123/article/details/88356583

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

Webpack3.X版本使用指南(一)

序言：

说起来是个序，倒不如说是对这篇文章名字由来的介绍。
本来我也想这把这篇博客的名字写成《Webpack配置教程》，但是想了一下，webpack有什么好配置的吗？或许真的有，但是说一下配置又如何呢？好像作用也不是那么的大。
所以我不准备说webpack怎么去配置，我只想这结合着案例，简单说一下webpack怎么去用，争取让你能找到一点使用webpack的感觉。

当然，使用webpack，你得先装上webpack，不会安装的可以去参考一下我的博客：Webpack安装教程

结合的案例是列表隔行变色：列表颜色奇偶行不同

首先，先创建我们的文件目录结构，如图所示：

文件根目录文件夹的名称最好使用英文，中文的名称也行，不过在使用npm时需要进行特殊处理，所以最好以英文来命名。
dist文件夹：项目一般做完后都需要发布一版，我们就可以把发布好的文件都放到dist文件夹里面去。
src文件夹：这个文件里存放的是我们的源码。
index.css，index.sass，index.html就不多说了，前面的两个是样式文件，后面的是html文件。
main.js是我们项目的JS入口文件。

先把我们的列表快速创建出来：

<!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>
    <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>
</body>
</html>

我们要实现列表的隔行变色，比较好的就是使用jQuery去实现。

但是我们没有jQuery的包，我们就通过npm去下载一个。

注意：我们现在的命令行所在的路径应该是我们的WebpackStudy这个根目录文件夹下，不要搞错了。

项目在下载依赖之前，要进行初始化，运行命令：npm init -y。
初始化后，我们就能看到一个package.json文件
然后下载我们的jQuery包。运行命令：npm i jquery
下载完成后，我们会发现项目中多了一个node_modules的文件夹，我们的jQuery包就在里面。

方法基本上是大同小异的，我们也可以利用这种方法，去下载bootstrap,animate.css等等。

并且，我们还能在package.json这个文件里看到我们下载的包及其版本。

  "dependencies": {
    "jquery": "^3.3.1"
  }

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

接下来就是，把jQuery库导入到我们的页面中，编写jQuery代码就行。【不推荐】

不推荐在html页面直接引入文件：
原因：我们网站会引入很多的静态资源，如果我们在这么引入怎么多包，会导致我们的页面打开很慢，因为每一个都需要发起一次二次请求。

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

怎么引用呢？我们看代码：

//1.导入jQuery
// import *** from *** 是ES6中导入模块的方式
import $ from '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>，这样我们再去运行页面，就会发现成功了。

由此我们可以得出一点结论：

1.webpack能够处理js文件之间的互相依赖关系；

2.webpack能够处理js的兼容问题，能够把高级的浏览器不识别的语法，转为低级的，浏览器能正常识别的语法。

运行命令的格式：webpack 要打包的文件的路径打包好的文件的路径

上面我简单使用了一下webpack打包，但是也有一个很大的问题，比如：我在main.js里面对表格的颜色做一下修改，我想把奇数行变成红色。
运行代码你会发现不行，没有效果，但是你或许也发现了问题的所在，我们改过的代码，没有经过webpack处理，所以没效果。
然后我们就需要再去运行一下webpack ./src/main.js ./dist/bundle.js？？？【4.0别忘了“-o”】这样写，岂不是会累死。
我们会想，我能不能每次改完之后，不写这么长的命令，直接写个webpack就能打包就好了。

答案告诉你是可以，不过我们需要一个配置文件：webpack.config.js

当你没有这个文件，直接输入webpack打包时，它也会提示你，是不是少了这个文件。

webpack.config.js是一个配置文件，你就大概猜到接下来要干什么了，没错，就是把我们上面写的那一串，写到配置文件里。

注意：webpack.cnfig.js是在项目根目录之下的，不要放错位置。

const path = require('path');

// 这个配置文件就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {

    //在配置文件中需要手动指定入口和出口
    entry: path.join(__dirname, './src/main.js'), //入口，表示要使用webpack打包哪个文件
    output: { //输出文件相关的配置
        path: path.join(__dirname, './dist'), //指定打包好的文件，输出到那个目录中去
        filename: 'bundle.js' //这是指定输出的文件的名称
    }
}

写完这个配置文件之后，我们在main.js里把奇数行改成黑色，此时在命令行中直接输入webpack，你就会发现，打包成功了，浏览器刷新页面，奇数行变成了黑色。

这是一点webpack的简单使用，这一篇介绍了：

怎么下载包。
怎么在main.js入口文件里引入包
怎么利用webpack处理代码的识别问题。
利用webpack配置文件，简化我们的工作。

未完待续。。。。
请看下一篇《Webpack使用指南(二)》

@带甜味的盐@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack3.X版本使用指南(一)

Webpack使用指南(一)序言：说起来是个序，倒不如说是对这篇文章名字由来的介绍。本来我也想这把这篇博客的名字写成《Webpack配置教程》，但是想了一下，webpack有什么好配置的吗？或许真的有，但是说一下配置又如何呢？好像作用也不是那么的大。所以我不准备说webpack怎么去配置，我只想这结合着案例，简单说一下webpack怎么去用，争取让你能找到一点使用webpac...
复制链接

扫一扫

专栏目录