webpack详解

黎明之前吧
242 阅读13分钟

目录

1.认识webpack

2.安装webpack

3.webpack的起步

4.webpack的配置

5.loder的使用

6.webpack中配置vue

7.pulugin的使用

8.搭建本地fuwuqi

■什么是webpack?

     这个webpack还真不是一两句话可以说清楚的。

■我们先看看官方的解释:

   At its core, webpack is a static module bundler for modern JavaScript applications.
   从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

■但是它是什么呢?用概念解释概念,还是不清晰。 我们从两个点来解释上面这句话:模块和打包

image.png

■前端模块化:

在前面学习中，我E经用了大量的篇幅解释了为什么前端需要模块化。

且我也提到了目前使用前端模块化的一防案: AMD、CMD、CommonJS、ES6。

在ES6之前，我们要想进行模块化开发，就必须借助于其他的具,让我们可以进行模块化开发。

并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，組将棋进行整合打包。

而webpack其中-个核心就是让我们可能进行模块化开发,并会帮助我们处理模块间的依赖关系。

且不仅仅是JavaScript文件,我们的CSS、图片、json文件等在webpack中都可以被当做模块来使用

■打包如何理解呢?

理解了webpack可以帮助我们进行模块化,并处理模块间的各种复杂关系后,打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

并組在打包的过程中，还可以对资源进行处理,比如压缩图片，将scss转成css, 将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。

但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢?

grunt/gulp的对比

grunt/gulp的核心是Task

    我们可以配置一系列的task，并且定义task要处理的事务(例如ES6、ts转化，图片压缩，scss转成css)

    之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。

    所以grunt/gulp也被称为前端自动化任务管理工具。

我们来看一个gulp的task

    下面的task就是将src下面的所有js文件转成ES5的语法。
    
    并且最终输出到dist文件夹中。

什么时候用grunt/gulp呢?

    如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。

    只需要进行简单的合并、压缩，就使用grunt/gulp即可。
    
    但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就■所以，

grunt/gulp和webpack有什么不同呢?

     grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。

      webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能

webpack的安装

安装webpack首先需要安装Node.js,Nodejs自带了软件包管理工具npm查看自己的node版本:

image.png

全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

image.png

局部安装webpack(后续才需要)

 --save-dev"是开发时依赖，项目打包后不需要继续使用的。

image.png

为什么全局安装后，还需要局部安装呢?

 在终端直接执行webpack命令，使用的全局安装的webpack
 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

准备工作

我们创建如下文件和文件夹:

文件和文件夹解析:   
    dist文件夹:肝存放之后打包的文件
    src文件夹：用于存放我们写的源文件
        main.js：项目的入口文件。具体内容查看下面详情
        mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情
    index.html:浏览器打开展示的首页htnl
    package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面会用上）

image.png

mathUtils.js文件中的代码

image.png

mainjs文件中的代码:

image.png

js的打包

现在的is文件中使用了模块化的方式进行开发,他们可以直接使用吗?可以。

因为如果直接在index.html引入这两个is文件,浏览器并不识别其中的模块化代码。
另外,在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，粗后期非常不方便对它们进行管理。

我们应该怎么做呢?使用webpack工具，对多个is文件进行打包。

 我们知道，webpack就是一 个模块化的打包工具，所以它支持我们代码中写模块，可以对模块化
 的代码进行处理。(如何处理的，待会儿在原理中，我会讲解)
 另外,如果在处理完所有模块之间的关系后,将多个js打包到一个js文件中，引入时就变得非常
 方便了。

OK,如何打包呢?使用webpack的指令即啊

image.png

image.png

使用打包后的文件

打包后会在dist文件下，生成一个bundejs文件

   文件内容有些复杂，这里暂时先不看,后续再进行分析。
   bundlejs文件,是webpack处理了项目直接文件依赖后生成的一个的文件, 我们只需要将这个i文件在index html中引入日

image.png

image.png

入口和出口

以将这两个参数写到配置中，在运行时，直接读取呢?

我们考虑一下， 如果每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦,
有没有一种方法克以将这两个参数写到配置中，在运行时，直接读取呢?

当然可以，就是创建一个webpack .config.js文件

局部安装和全局安装

目前，我们使用的webpack是全局的webpack,如果我们想使用局部来打包呢?

因为一个项目往往依赖特定的webpack版本， 全鋦的版本可能很这个项目的webpack版本不- 致.
导出打包出现问题。

所以通常一 个项目， 都有自2己局部的webpack.

第-步,项目中需要安装自己局部的webpack

 这里我们让局部安装webpack3.6.0
  Vue CLI3中已经升级到webpack4,但是它将配置文件隐藏了起来,所以查看起来不是很方便。

image.png

第二步,通过node_ modules/ .bin/webpack启动webpack打包

image.png

image.png

package.json中的自定义

但是，每次执行都敲这么一长串有没有觉得不方便呢?

    OK,我们可以在package.json的scripts中定义自己的执行脚本。

package.json中的scripts的脚本在执行时，会按照一定的顺寻找命令对应的位置。

首先，会寻找本地的node_ modules/.bin路径中对应的命令

如果没有找到，会全局的环境变量中寻找。

如何执行我们的build指令呢?

image.png

image.png

什么是loader

loader是webpack中一个非常核心的概念。

webpack用来做什么呢?

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码,粗webpack会自动处理js     
之间相关的依赖。 

但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、片,也包括- -些高级的
将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css， 将jsx、.vue文件 
转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。

那怎么办呢?给webpack扩展对应的loader就可以啦。

loader使用过程:

 步骤一: 通过npm安装需要使用的loader
 
 步骤_二:在webpack.config.js中的modules关键字 下进行配置

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

css文件处理-准备工作

项目开发过程中，我们必然需要添加很多的演样式，而样式我们往往写到一个单独的文文件

  在src目录中，创建一个css文件，其中创建一个normal.css文件
  
  我们也可以重新组织文件的目录的结构，将零散的js文件放在一个js文件夹中

image.png

normal.css中代码非常简单，也就是将body设置为red

image.png

但是，这个时候normal.css中的样式会生效吗？

  当然不会，因为我们压根就没有用ta
  webpack也不可能找到它，因为我们只有一个入口，webpack会从入口找到其他依赖的文件

在入口文件中引用

image.png

css文件处理-打包报错信息

重新打包，会出现如下错误

image.png

这个错误告诉我们:加载normal.css文件必须有对应的loader.

css文件处理-css-loader

在webpack的官方中，我们可以找到如下关于样式的loader使用方法:

按照官方配置webpack. config.js文件

注意:配置中有一个style-loader, 我们并不知道它是什么，所以可以暂时不进行配置。

image.png

重新打包项目:

但是，运行index.html, 你会发现样式并没有生效。

 原因是css-loader只负责加载css文件，但是并负责将css具体样式嵌入到文档中。
 
 这个时候，我们还需要一个style-loader帮助我们处理。

image.png

css文件处理-style-loader

安装style- loader

image.png

image.png

注意: style-loader需 要放在css-loader的前面。

疑惑:不对吧?按照我们的逻辑，在处理css文件过程中，应该是css-loader来进行进一步的处理 ，为什么loader来进行进一步的处理 ，为什么会将style-loader放在前面呢?

答案:这次因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。

目前，webpack.config.js的配置如下:

image.png

less文件处理-准备工作

如果我们希望在项目中使用less、scss stylus来写样式,webpack是否可以帮助我们处理呢?

 我们这里以less为例，其他也是一样的。

我们还是先创建一-个less文件, 依然放在css文件夹中

image.png

image.png

image.png

less文件处理

继续在官方中查找，我们会找到less-loader相关的使用说明

首先，还是需要安装对应的loader

 注意:我们这里还安装了less, 因为webpack会使用less对less文件进行编译

image.png

其次，修改对应的配置文件

  添加一个rules选项，用于处理.less文件

image.png

首先，我们在项目中加入两张图片:

 一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)

待会儿我们会针对这两张图片进行不同的处理

我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式:

image.png

我们如果直接打包会出现如下情况

image.png

图片处理url-loader

图处理，我们使用url-loader来处理, 依然先安装url-loader

image.png

修改webpack .config.js配置文件:

image.png

再次打包，运行index.html, 就会发现我们的背图片选出了出来。

而仔细观察，你会发现背景图是通过base64显示出来的

0K,这也是limit属性的作用，图片于8kb时,对图片进行base64编码

image.png

图片处理 file-loader

那么问题来了,如果大于8kb呢?我们将background的图片改成test02.jpg

 这次因为大于8kb的图片，会通过file-loader进行处理， 但是我们的项目中并没有file-loader

image.png

所以，我们需要安装file-loader

image.png

再次打包，就会发现dist文件夹下多了一-个图片文件

image.png

图片文件处理-修改文件名称

我们发现webpack自动帮助我们生成一个非常长的名字

这是一个32位hash值，目的是防止名字重复

但是，真实开发中，我们可能对打包的图片名字有一定的要求

比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

image.png

所以，我们可以在options中添加上如下选项:

 img:文件要打包到的文件夹
 
 name:获取图片原来的名字，放在该位置
 
 hash:8:为了防止图片名称冲突，依然使用hash，但是我们只保留8位
 
 Dext:使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确

  默认情况下，webpack会将生成的路径直接返回给使用者
  
  但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/

image.png

ES6语法处理

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的语法转成ES5，那么就需要使用babel。

 而在webpack中，我们直接使用babel对应的loader就可以了。

image.png

配置webpack.config.js文件

image.png

重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法

引入vue.js

项目中，我们会使用Vuejs进行开发，而祖会以特殊的文件来组织vue的组件。

下面我们来学习一下如何在我们的webpack环境中集成Vuejs

现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装

注:因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

image.png

image.png

image.png

el和elenment的区别

正常运行之后，我们来考虑另外一个问题:

如果我们希望将data中的数据显示在界面中，就必须是修改index.html

如果我们后面自定义了组件，也必须修改index.html来使用组件

但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢?

定义template属性:

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容

这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素

但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢?

我们可以再定义一个template属性，代码如下:

image.png

el和elenment的区别（二）

重新打包，运行程序，显示一样的结果和HTML代码结构 那么，el和template模板的关系是什么呢?

 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。

而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做有什么好处呢?

这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应     的标签即可

但是，书写template模块非常麻烦怎么办呢?

没有关系，稍后我们会将template模板中的内容进行抽离。

会分成三部分书写:template、script、style，结构变得非常清晰。
avatar
文章
阅读
粉丝