webpack

Posted 2022-06-02 bgd150809324

webpack

今天目标：

1. 能够安装webpack

2. 能够配置打包模式、入口和出口文件

3. 能够编译index.html模板页面

4. 能够配置实时打包功能

5. 能够安装配置使用css相关loader

6. 能够安装配置使用less相关loader

7. 能够安装配置使用img相关loader

8. 能够安装配置使用babel相关loader

commonjs ： module.exports = 对象 var 名称 = require(xxx) nodejs

es6模块化: export default 对象 import 名称 from ‘xx‘

amd: define() define

cmd

 

介绍

什么是：

webpack是项目的打包机器

webpack可以一次性对项目内部全部的less、es6、es7做"编码降级"处理，非常高效

准确定义：

WebPack可以看做是模块打包机器,它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（less、es6、es7等），并将其打包为合适的格式以供所有浏览器使用。

本身是通过nodejs开发的

 

项目开发：

html、css、js

less、es6、es7 浏览器不能直接运行，less需要编译器变为普通css才可以给浏览器运行，es6、es7在高端浏览器可以运行，中低端不保证，为了全部浏览器都可以运行es6/es7的内容，那么其要降级为es5标准

以上less/es6/es7为了兼容性、可执行性更好，需要编码、降级处理，它们如果逐个编码、降级处理会使得项目开发效率降低

 

 

 

什么地方适合使用

适合场景：

1. spa项目(单页面应用程序项目)，例如黑马自媒体(后台系统)，移动端项目(前台系统)

   项目特点：被请求执行的页面数量小于500个

2. vue、react、angular都可以使用webpack

 

隔行换色案例

目标：给一系列li标签设置隔行换色效果

步骤：

1. 创建空的项目运行目录 01-web

2. 给该项目创建package.json文件， yarn -y init

3. 给项目安装jquery依赖包， yarn add jquery

4. 给项目创建运行目录 src,并在其中创建 index.html和 index.js文件，它们内容如下

   

5. 案例运行效果：

   

注意：

? 项目代码文件名称为index.js 和 index.html ，暂时是必须的

? 它们的公共目录名称为src，暂时是必须的

 

 

安装配置

对webpack进行安装配置

官网：https://webpack.docschina.org/

 

步骤：

1. 安装两个依赖包 ， yarn add webpack webpack-cli -D

2. 在package.json中做配置，内容如下：

    

    

    

    

    

     "scripts":

       "build":"webpack"

     ,

    

   现在在命令行中可以执行 npm run build 做webpack打包处理

   scripts是固定的配置结构

   以上各个单词通过“双引号”圈选，本质是json部分

打包实现

目标：

把隔行换色中核心js文件(jquery.js 和 index.js) 做打包变成一个文件

步骤：

1. src/index.html文件中不要引入jquery.js文件了

2. 在src/index.js中 通过 import $ from ‘jquery‘ 方式引入

3. webpack打包， npm run build，

   打包完毕，会生成dist目录，里边的main.js文件就是 jquery 和 index.js 的合成体

4. 现在在src/index.html中只引入一个dist/main.js文件即可(之前是引入两个)

    

    

    

    

    

   <!-- <script src="../node_modules/jquery/dist/jquery.js" type="text/javascript"></script> -->

   <!-- <script src="./index.js" type="text/javascript"></script> -->

   <script src="../dist/main.js" type="text/javascript"></script>

    

src/index.js 就项目主入口文件(类似自媒体的 src/main.js)

src/index.html 就是项目的主模板文件 (类似自媒体 的 public/index.html)

 

运行依赖和开发依赖

依赖包安装有两种方式：

 

 

 

 

 

yarn  add   jquery     // 安装运行依赖包

yarn  add   webpack -D  // 安装开发依赖包

 

运行依赖包标志为 --save 或简称为 -S ，现在不设置就是默认项目

运行依赖包标志为 --save-dev 或简称为 -D

一般在主入口文件中需要做import引入的，都是运行依赖包

在主入口文件不需要引入的，是工具级的依赖包，都通过 开发依赖方式安装

 

它们安装完毕在package.json中会形成如下效果：

以上不同类型依赖包有区分

好处是：

这个项目被其他人获取到，可以根据需要安装相关的依赖包

1. 如果这个新作者只需要运行项目，就单独安装全部的运行依赖包即可，不要安装开发依赖包(项目体积会减小，运行速度快)

    

    

    

    

    

   yarn  --production

    

2. 如果这个新作者不仅需要运行项目还要对项目做二次开发，就安装全部的依赖包(运行和开发)

    

    

    

    

    

   yarn

    

开发依赖、运行依赖针对当前的vue中的webpack项目体现不明显，在nodejs中体现明显

 

问：依赖包如何区分是开发的还是运行的：答：在 src/index.js 入口文件中通过require(或es6 import)引入的就是运行依赖包，否则是开发依赖包

 

 

配置打包模式

webpack打包模式需要配置，否则会黄色信息warning警告提示

步骤：

1. 根目录创建webpack的配置文件，名称为webpack.config.js

2. 配置如下信息：

    

    

    

    

    

   module.exports = 

     // 不是json语法，不用设置双引号圈选每一个项目，就是普通对象

     mode: "development"   // development  production

    

   production: 生成模式，打包后的文件是压缩优化的

   development：开发调试模式，打包后的文件有适当的空白、注释、回车

   前期使用 development 开发模式

 

配置入口和出口文件

入口文件默认为：src/index.js

出口文件默认为：dist/main.js

 

如果需要可以对它们进行配置，配置后为：

入口文件为：src/main.js

出口文件为：dist/chunk.js

 

步骤：

1. 把src/index.js 改为 src/main.js

2. 在webpack.config.js中做如下配置：

    

    

    

    

    

   // 引入path

   var ph = require(‘path‘)

   ?

   module.exports = 

     // 不是json语法，不用设置双引号圈选每一个项目，就是普通对象

     mode: "development",   // development  production

     // 给项目配置主入口文件

     entry: ‘./src/main.js‘,

     // 给项目配置出口文件(打包后)

     output: 

       // 出口文件目录

       path: ph.resolve(‘./dist‘),

       // 出口文件名字

       filename: ‘chunk.js‘

    

3. 打包效果(npm run build)：

   

通过绝对路径引入一个文件

ph.join(__dirname,‘./dist‘) E:\Vue75\75everyday\09day\01-web\dist

ph.resolve(‘./dist‘), E:\Vue75\75everyday\09day\01-web\dist

resolve较比join省去了__dirname，一样可以获得文件的绝对路径

 

 

编译模板页面

项目文件做打包后，需要我们“手动”在模板文件(src/index.html)中引入 打包好的js文件(dist/chunk.js)

webpack本身可以安装功能插件(HtmlWebpackPlugin)，其作用为：

对src/index.html文件也做"打包(复制)"处理，并生成在dist目录下，然后自动把chunk.js文件 给引入进来

安装使用步骤：

1. 安装， yarn add html-webpack-plugin -D

2. 在webpack.config.js中做配置

   

   webpack配置文件中其他的模块需要通过require方式引入，不能使用import，因为webpack是nodejs开发的，需要使用commonjs模块化方案

3. 在src/index.html源模板文件中可以把../dist/chunk.js引入给去掉了

4. 做打包处理 npm run build，发现dist里边生成了index.html模板文件，并在其中自动引入了chunk.js文件了

5. 

   以上dist目录的文件都是打包后的文件，不要做直接的修改，有需求请去修改src里边的文件

实时打包

对src的源文件进行修改后，为了查看效果需要手动再次打包(npm run build)，生产效率低下，现在webpack有一个工具，可以使得随时修改的文件随时在浏览器都可以查看到效果(不用重复打包)，生产率提高(与之前 的 自媒体 的 npm run serve效果一致)

该工具名称为：webpack-dev-server(该工具会自动生成http的web服务出来)

实施步骤：

1. 安装， yarn add webpack-dev-server -D

2. 在webpack.config.js中中做配置

   

3. 在package.json中配置启动指令

   

   现在通过 npm run serve 方式就可以实时打包、浏览器实时查看效果了

注意：

? 实时打包运行的内容是通过“内存”提供的，本身不生成dist目录

 

loader-运行css文件

目标：

创建一个独立的css文件和样式，要其作用给当前的主模板文件(src/index.html)

步骤：

1. 创建src/css/1.css文件，和简单样式 licolor:red

2. 在src/main.js中引入1的css样式文件

3. 现在实时打包已经报错了

   

   错误解读：1.css文件介入项目后就产生错误了，告知需要一个loader掌控局面

 

loader-介绍

webpack本身就是一个打包机器，其不能对具体代码内容部分进行处理(或处理得非常有限)，不同的代码内容(less/scss/ES6(ES7)/image/css等等)需要webpack找到不同的loader(装载器)实现转码、编译、降级处理。

 

loader-安装配置css相关loader

处理css的loader有两款：style-loader 和 css-loader

安装配置使用css相关loader步骤：

1. 安装loader，yarn add css-loader style-loader -D

2. 在webpack.config.js中配置loader

   

3. 现在重新启动服务 npm run serve，就发现css已经可以运行了

 

loader-css相关loader解读

打包好的css文件内容在哪？

答：做物理打包 npm run build,发现其在 chunk.js文件里边

 

在浏览器中可以看到css文件内容已经通过style标签的方式呈现在源码里边，这个style标签是chunk.js动态生成并嵌入到执行内容中去了

css-loader和style-loader的各自作用如下：

 

 

 

 

 

  module: 

    rules: [

        // test：通过正则表达式方式匹配.css结尾的文件(样式文件)

        test: /\.css$/,

        // 当遇到css样式文件，就要通过如下loader处理

        // 注意：两个loader有严格的先后顺序

        use: [‘style-loader‘ , ‘css-loader‘]

        // css-loader虽然在后边，但是其会先执行，使得css文件可以通过import方式引入，并把css内容编译到chunk.js中

        // style-loader虽然在前边，但是其会后执行，使得css内容在chunk.js文件中被通过<style>标签方式生成出来，并嵌入到运行文件中

      ,

    ]

  ,

 

 

loader-引入背景图片应用

在项目中引入img图片资源做背景应用(图片通过css文件做背景效果的)

步骤：

1. 给src/index.html创建两个div(one/two)

2. 给项目复制两个图片(bigger.jpg small.jpg)到 src/img 目录

3. 在src/css/1.css文件中 给 两个div设置宽度、高度、背景图片(分别是bigger.jpg small.jpg)

4. 现在实时打包运行报错

   

   原因：缺少loader(图片相关的loader)

 

 

loader-安装配置图片相关loader

处理img图片的loader有两个：url-loader 和 file-loader

步骤：

1. 安装loader，yarn add url-loader file-loader -D

2. 给webpack.config.js做配置，如下

   

3. 现在重新实时打包(npm run serve)就是ok的，并且背景图片也在浏览器生成好了

 

loader-图片相关loader解读

url-loader:

? 负责对小于 8192字节大小的图片变为base64格式的字符串处理

? limit:8192阈值大小建议是10k左右

file-loader：

? 图片大于 8192后 该loader会被url-loader自动调用

? 负责对大于 8192字节大小的图片重新编译生成在dist目录

 

浏览器源码可以看到大图是独立的物理文件，小图是 字符串：

注意：

? 图片在1.css中通过css样式设置为背景的，可以被webpack各种处理

? 而在模板文件中(src/index.html)通过img标签设置的图片，不会被webpack处理，其被认为是普通的html标签属性了

 

loader-打包好图片在哪

大图是以物理文件形成在dist目录内部

小图是以字符串形式嵌入到chunk.js中去了

如果生成的物理图片很多，它们都存在于dist目录，可以在dist里边创建子级目录存储,具体是给设置outputPath选项

 

 

 

 

 

        use: [

            // 注意：图片loader只配置一个url-loader即可，file-loader在条件满足后内部自动调用

            loader: ‘url-loader‘,

            options: 

              // limit:图片大小阈值设定

              // a.图片大小大于8192，就以物理文件重新创建该图片，并形成在dist目录

              // b.图片大小 小于等于8192，该图片就被编译为字符串了，嵌入的应用文档，好处是节省一个http请求资源

              // 注意：不是全部的图片都适合变为字符串的，只有大小小于10k的图片才适合(图片变为字符串后，大小要变得更大)

              limit: 8192,

              outputPath:‘image‘ // 创建dist/image目录存储生成的物理图片

        ]

 

 

loader-base64字符串图片说明

图片变为base64格式字符串了

什么是base64格式？

答：Base64就是一种基于64个可打印字符来表示二进制数据的方法。

一个图片可以变为二进制数据，该数据再编码为base64格式

 

loader-应用less文件

项目应用less：

步骤：

1. 创建src/css/1.less文件，并设置简单的less样式

2. 在main.js中引入1.less文件

3. 现在实时打包报错误了(缺少对应loader)

 

 

 

loader-安装配置less相关loader

less需要的处理loader有：less-loader、style-loader、css-loader

步骤：

1. 安装loader ， yarn add less-loader less -D

2. 配置loader，

   

3. 重启服务npm run serve,less已经生效了

loader-less相关loader解读

 

 

 

 

 

        // 3) less处理loader

        test: /\.less$/,

        use: [‘style-loader‘ , ‘css-loader‘, ‘less-loader‘] 

      ,

 

如上，less相关loader需要配置如上3个，顺序严格按照上述

less-loader:负责把less变为css内容

css-loader：告知可以通过import模块化方式引入该less文件，并注入到chunk.js文件中

style-loader：使得chunk.js内部的less样式内容通过<style>标签的方式嵌入到应用文档中

less内容会被打包到chunk.js文件中，该文件运行时，会通过style方式把less内容嵌入到应用文档中

(实际打包好的dist/index.html应用文档里边没有任何的style样式标签)

 

 

loader-运行es6标准代码

项目开发可以使用es6等高级内容，但是这些内容不能在所有浏览器运行，一些低版本的浏览器是运行不了的

为了使得项目兼容性更好，就要通过webpack把es6高级内容降级为es5通用的内容

步骤：

1. 在main.js中应用es6高级内容

    

    

    

    

    

   // 应用es6高标准内容(两种  let、箭头函数)

   let age = 23

   var getinfo = ()=>

     return ‘hello‘

    

2. 给项目做物理打包 npm run build

3. 现在打开chunk.js出口文件，发现es6的内容没有做降级处理，还是原先样子

   

   上图，还是let和箭头函数 等es6高级内容(项目兼容性不能保证

loader-babel-loader和preset和plugin关键字解读

处理es6高级内容的loader是 babel-loader

每一个高级标准内容的处理都有独立的模块，称为plugin插件，let有对应的plugin、箭头函数有对应的plugin

如果应用许多高级内容，就需要安装许多对应的不同plugin，各个plugin逐个安装很繁琐

此时来了preset，其是对许多常用plugin的封装，提供应用速度

(如果用到了一个生僻的高级内容，preset处理不了，就再额外安装plugin解决)

 

 

loader-安装配置loader和preset做降低处理

步骤：

1. 安装，yarn add babel-loader @babel/core @babel/preset-env -D

2. 在webpack.config.js中配置loader

   

3. 使得babel-loader可以找到preset

   配置方式有3中：webpack.config.js、bablel.config.js、.babelrc

   我们采用bablel.config.js主流方式

   在根目录创建 bablel.config.js 文件，并设置如下内容：

   

4. 现在给项目重新做物理打包(npm run build),发现es6高级内容已经降级为es5了