初识webpack（一）概念、入口配置、输出配置、loader等

news2024/11/16 7:29:48

目录

(一)概念

webpack的依赖图

(二)webpack的基本使用

(三)webpack的配置文件

1.入口(entry)配置

2.输出(output)配置

(三)loader

1.css文件处理 

(1)安装css-loader和style-loader

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

2.less文件处理

3.postcss的使用

(1)安装postcss和postcss-loader

(2)安装postcss-preset-env插件

4.图片文件处理

示范代码准备：

(1)asset/resource模块类型

(2)asset/inline模块类型

(3)asset模块类型

5.JS文件的babel处理

6.vue文件处理

准备入口文件main.js和vue文件

在webpack.config.js中配置loader

(一)概念

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

webpack的依赖图

  1. 根据指令或配置找到入口文件
  2. 从入口文件出发构建依赖关系图，这个关系图会包括项目中所需的所有模块(js、css、字体、图片等) 
  3. 遍历图结构，依次打包每个模块(依靠loader完成)

webpack只能理解 JavaScript 和 JSON 文件，而对于其他类型文件：css、TypeScript等，需要依靠安装对应的 loader 对其进行转换(后续会补充)。

(二)webpack的基本使用

1.初始化项目，生成package.json文件

npm init -y 

2.安装webpack和webpack-cli包

npm i webpack webpack-cli -D 

3.在package.json配置打包指令

"scripts": {

    "build": "webpack"

  },

4.在终端输入 npm run build 即可打包项目

(三)webpack的配置文件

webpack可以开箱即用，无需设置配置文件，但会将 src/index,js 文件作为入口文件，将 dist/main.js 作为输出文件。如果没有对应路径的入口文件，就会打包失败并报错。

如果需要对webpack进行更完善的配置，就需要创建webpack.config.js文件，webpack会自动使用它的配置内容

1.入口(entry)配置

可以配置一个或多个入口文件 

module.exports = {
    entry: './src/index.js'
}

2.输出(output)配置

通过配置 output 选项，告知 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。

通过如下配置打包后代码会生成在/dist/bundle.js中 

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}

(三)loader

loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

两种使用loader的方法：

  1. 配置法：在webpack配置文件中使用（推荐）
  2. 内嵌法：在需要解析的文件中引入对应loader（每个文件都需要单独引入，较繁琐）

loader有两个属性：

  1. test属性：用于识别文件类型
  2. use属性：用于进行转换时使用哪个loader 

1.css文件处理 

直接将css文件引入到入口文件进行打包会导致报错

import './components/css_test.css'

因此，需要依靠css-loader解析css文件，依靠style-loader将解析好的css插入DOM中 

参考文档：

css-loader | webpack 中文文档 | webpack中文文档 | webpack中文网

style-loader | webpack 中文文档 | webpack中文文档 | webpack中文网

(1)安装css-loader和style-loader

npm i css-loader style-loader -D 

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

注意：loader 从前往后地取值(evaluate)/执行(execute) ，即先执行css-loader再执行style-loader

module: {
    rules: [
        {
            /* 正则表达式 */
            test: /\.css$/, // 识别.css后缀的文件
            /* 使用对应loader解析，解析方向：从后往前 */
            // 简写形式
            use: ['style-loader', 'css-loader']
            // 完整形式
            // use: [
            //     { loader: 'style-loader' },
            //     { loader: 'css-loader' },
            // ]
            }
        ]
    }

重新打包后，css就解析成功了，但是是通过页内样式添加进来的。后续css文件的单独抽取以及压缩等操作会在后面学习到。

2.less文件处理

参考文档：less-loader | webpack 中文文档 | webpack中文文档 | webpack中文网

(1)安装less和less-loader组件

npm i less less-loader -D 

(2)配置webpack.config.js

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
}

3.postcss的使用

postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具，可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网

postcss的 postcss-preset-env 插件可以帮助我们将一些现代的 CSS 特性，转成大多数浏览器认识的 CSS，并且会根据目标浏览器或者运行时环境添加所需的 polyfill，已经内置了autoprefixer 

(1)安装postcss和postcss-loader

npm i postcss postcss-loader -D

(2)安装postcss-preset-env插件

npm i poscss-preset-env -D

(3)配置webpack.config.js

 {
    test: /\.css$/, // 识别.css后缀的文件
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        {
            loader: 'postcss-loader',
            options: {
                /* 对postcss进行配置 */
                postcssOptions: {
                    /* 配置插件 */
                    plugins: [
                        ['postcss-preset-env',],
                    ],
                },
            },
        }
    ]
},

可以将postcss的具体配置写到postcss.config.js文件中，配置更简洁

在postcss.config.js文件中：
module.exports = {
    plugins: [
        'postcss-preset-env'
    ]
}

在webpack.config.js中：
 {
    test: /\.css$/, // 识别.css后缀的文件
    use: [ 'style-loader','css-loader','postcss-loader']
},

再重新打包后，postcss就会根据样式自动添加浏览器前缀

4.图片文件处理

资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网

在webpack5之前，处理资源文件还需要用到相关的loader

在webpack5中，资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader 

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource：发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
  • asset/inline：导出一个资源的 data URI。之前通过使用 url-loader 实现。
  • asset/source：导出资源的源代码。之前通过使用 raw-loader 实现。（不常用）
  • asset：在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。（推荐）

示范代码准备：

用到两个文件大小不同的图片（后续解释原因），一个使用background-url链接到图片，一个使用img标签src链接到图片。

.image {
    background-image: url(../images/p1.jpg);
}
import img2 from '../images/p2.jpg'
import '../style/img.css'

// 图片1 采用url()展示
const image1 = document.createElement('img')
image1.classList.add('image')
document.body.append(image1)

// 图片2 采用直接链接展示
const image2 = document.createElement('img')
image2.src = img2
document.body.append(image2)

接下来会分别展示asset/resource、asset/inline、asset这三种资源模块类型的区别 

(1)asset/resource模块类型

在webpack配置文件中配置模块类型

{
    test: /\.(png|jpe?g|gif|svg)$/, // 识别图片后缀的文件
    type: 'asset/resource'
}

打包后，可以看到用到的图片资源都被复制到打包文件夹中，以哈希值进行重命名了

所有图片文件都将被发送到输出目录，并且其路径将被注入到 bundle 中，除此之外，你可以为它们自定义 outputPath 和 publicPath 属性。 

自定义输出文件名

第一种方法：在配置文件的output里设置assetModuleFilename。

可以设置固定名称(不建议)，也可以设置相关占位符，如 

assetModuleFilename: 'images/[hash][ext][query]'

但是不建议在这里配置，资源文件除了图片还有可能是字体文件等资源，这样会导致混淆

第二种方法：在rules里进行配置generator

{
    test: /\.(png|jpe?g|gif|svg)$/, // 识别图片后缀的文件
    type: 'asset/resource',
    /* 第二种：在这里设置输出资源路径和文件名 */
    generator: {
        /* 占位符：
            name：文件原本的名字；
            hash：webpack生成的哈希值；
            ext：扩展名
        */
        filename: 'image/[name]_[hash][ext]'
    }
}

打包后图片资源文件都存储在image文件夹中，并以name和hash命名

(2)asset/inline模块类型

配置文件：

{
    test: /\.(png|jpe?g|gif|svg)$/, // 识别图片后缀的文件
    type: 'asset/inline', // 将图片转换为base64编码的data:uri数据存放在js文件中
}

打包后，图片资源不再以文件形式打包，而是转换为base64编码的数据存储到js文件中，这会导致js文件变大

(3)asset模块类型

以上两种模块类型都太过绝对，不是最优解

  • 使用resource模块类型，图片过多会影响网络请求；
  • 使用inline模块类型，图片过大会增加js文件体积，导致页面渲染缓慢 ；

使用asset类型进行自动选择 

webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。 

可以根据自己的情况，在 webpack 配置的 module rule 层级中自定义使用inline类型的最大文件大小

 {
    test: /\.(png|jpe?g|gif|svg)$/, // 识别图片后缀的文件
    type: 'asset',
    /* 第二种：在这里设置输出资源路径和文件名 */
    generator: {
        /* 占位符：
            name：文件原本的名字；
            hash：webpack生成的哈希值；
            ext：扩展名
        */
        filename: 'image/[name]_[hash][ext]'
    },
    /* 自定义使用inline还是resource类型 */
    parser: {
        dataUrlCondition: {
            maxSize: 200 * 1024 // 200kb 单位为byte
        }
    }
},

5.JS文件的babel处理

webpack对代码进行打包时，会将ES6+的代码原封不动的打包进文件，而一些低版本浏览器无法兼容，因此使用babel工具对代码进行转换，将ES6+转换为ES5代码 

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 

Babel 是什么？ · Babel 中文文档 | Babel中文网

@babel/core：是babel的核心库，所有的核心Api都在这个库里，这些Api供babel-loader调用

预设(presets) ：

Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块

@babel/preset-env：用于将es6+转换为es5语法

@babel/preset-typescript：用于typescript语法转换

@babel/preset-react：用于react代码

高版本js代码转es5规范的配置如下：

下载对应组件和loader

npm install -D babel-loader @babel/core @babel/preset-env

配置webpack.config.js文件

rules: [
    /* babel预设插件的使用 */
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                // 使用预设，将高版本js语法转换为es5语法
                presets: ['@babel/preset-env'] 
}}}]

6.vue文件处理

通过vue-loader来编写单文件组件格式的vue文件

介绍 | Vue Loader

安装vue-loader 和 vue-template-compiler 

npm install -D vue-loader vue-template-compiler

vue-template-compiler插件：用于编译template标签包裹的内容 

准备入口文件main.js和vue文件

/* main.js */
import { createApp } from 'vue'
import App from './app.vue'

createApp(App).mount('#app')

/* app.vue*/
<template>
    <div>
        <h1 class="title">{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "7777777"
        }
    },
}
</script>

<style>
.title {
    color: red;
}
</style>

在webpack.config.js中配置loader

const { VueLoaderPlugin } = require('vue-loader')

module: {
        rules: [
            /* vue文件的处理 */
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/, // 识别.css后缀的文件
                use: ['vue-style-loader', 'css-loader',]
            },
        ],
    },
plugins: [
        new VueLoaderPlugin()
    ]

VueLoaderPlugin插件作用：

将定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块  

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1423854.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

相片修复框架-GFPGAN

相片修复框架-GFPGAN

一 GFPGAN 介绍 GFPGAN 是一个由腾讯 ARC 团队开发的用于人脸图像生成和优化的 GAN 模型。在github可以找到开源的代码&#xff0c;它由两个主要模块组成&#xff1a; 退化移除模块 (U-Net)&#xff1a;用于从低分辨率、低质量的人脸图像中恢复出高质量的人脸图像。 生成式脸部…
阅读更多...
软件工程知识梳理6-运行和维护

软件工程知识梳理6-运行和维护

软件维护需要的工作量很大&#xff0c;大型软件的维护成本高达开发成本的4倍左右。所以&#xff0c;软件工程的主要目的就是要提高软件的可维护性&#xff0c;减少软件维护所需要的工作量&#xff0c;降低软件系统的总成本。 定义&#xff1a;软件已经交付使用之后&#xff0c;…
阅读更多...
【爬虫专区】批量下载PDF （无反爬）

【爬虫专区】批量下载PDF （无反爬）

天命&#xff1a;只要没反爬&#xff0c;一切都简单 这次爬取的是绿盟的威胁情报的PDF 先看一下结构&#xff0c;很明显就是一个for循环渲染 burp抓包会发现第二次接口请求 接口请求一次就能获取到了所有的数据 然后一个循环批量下载数据即可&#xff0c;其实没啥难度的 imp…
阅读更多...
腾讯云幻兽帕鲁Palworld服务器价格表，2024年2月最新

腾讯云幻兽帕鲁Palworld服务器价格表，2024年2月最新

腾讯云幻兽帕鲁服务器价格32元起&#xff0c;4核16G12M配置32元1个月、96元3个月、156元6个月、312元一年&#xff0c;支持4-8个玩家&#xff1b;8核32G22M幻兽帕鲁服务器115元1个月、345元3个月&#xff0c;支持10到20人在线开黑。腾讯云百科txybk.com分享更多4核8G12M、16核6…
阅读更多...
PVE 7.4-17 中开启vGPU显卡虚拟化

PVE 7.4-17 中开启vGPU显卡虚拟化

要为VM提供图形引擎&#xff0c;一般分为3种&#xff1a; 1、软件模拟图形-性能差 2、显卡直通-性能最好&#xff0c;一个虚拟机独享一个显卡 3、vGPU-性能好&#xff0c;多个虚拟机共享一个显卡 目前市面上的主流GPU厂家有intel、amd、nvidia&#xff0c;本篇文章主要介绍nvi…
阅读更多...
Intercom与HelpLook：搭建知识库哪个更符合你的需求？

Intercom与HelpLook：搭建知识库哪个更符合你的需求？

在当今信息化日益发展的时代&#xff0c;知识库作为一种集中存储和管理企业信息的重要工具&#xff0c;已经被越来越多的公司所采用。它有助于企业提升效率&#xff0c;改进服务质量&#xff0c;更好地与客户进行沟通。Intercom和HelpLook近两年在这个领域的讨论度不断变高&…
阅读更多...
网络层 IP协议(1)

网络层 IP协议(1)

前置知识 主机:配有IP地址,但是不进行路由控制的设备 路由器:既配置了IP地址,又能进行路由控制的设备 节点:主机和路由器的总称 IP协议主要完成的任务就是 地址管理和路由选择 地址管理:使用一套地址体系,将网络设备的地址描述出来 路由选择:一个数据报如何从源地址到目的地址 …
阅读更多...
摄影分享|基于Springboot的摄影分享网站设计与实现(源码+数据库+文档)

摄影分享|基于Springboot的摄影分享网站设计与实现(源码+数据库+文档)

摄影分享网站目录 目录 基于Springboot的摄影分享网站设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、图片素材管理 3、视频素材管理 4、公告信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐…
阅读更多...
excel 选中指定区域

excel 选中指定区域

问题 excel 选中指定区域 详细问题 笔者有一个excel数据集&#xff0c;数据量较大&#xff0c;如何快速选中指定区域 解决方案 步骤1、 点击起始单元格 确定单元格坐标&#xff08;建议直接CtrlC复制至剪贴板&#xff09; 具体操作入下图所示 步骤2、 点击结束单元格 …
阅读更多...
数与抽象之自然数

数与抽象之自然数

自然数 “自然数的抽象与内在属性&#xff1a;图7中的纯粹五性” “自然”是数学家对我们所熟悉的1&#xff0c;2&#xff0c;3&#xff0c;4这样的数字所赋予的称呼。自然数是最基本的数学对象&#xff0c;但它们似乎并没有引导我们去抽象地思考。毕竟&#xff0c;单单一个数…
阅读更多...
【Linux网络编程一】网络基础（网络框架）

【Linux网络编程一】网络基础（网络框架）

【Linux网络编程一】网络基础&#xff08;网络框架&#xff09; 一.什么是协议1.通信问题2.协议本质3.网络协议标准 二.协议分层1.为什么协议要分层2.如何具体的分层 三.操作系统OS与网络协议栈的关系1.核心点&#xff1a;网络通信贯穿协议栈 四.局域网中通信的基本原理1.封装&…
阅读更多...
【教学类-34-01】20240130纸尺1.0 （A4横版5条，刻度25*5=125CM）

【教学类-34-01】20240130纸尺1.0 （A4横版5条，刻度25*5=125CM）

作品展示&#xff1a; 背景需求&#xff1a; 大3班一位孩子用“骰子统计纸”制作了一个身高刻度表 【教学类-40-01】A4骰子纸模制作1.0&#xff08;飞机形 5.5CM纸盒骰子1个记录纸1条&#xff09;&#xff08;点数是不同的符号图案&#xff09;-CSDN博客文章浏览阅读160次。【…
阅读更多...
查看阿里云maven仓中某个库有哪些版本

查看阿里云maven仓中某个库有哪些版本

起因 最近项目上有做视频业务&#xff0c;方案是使用阿里云的短视频服务&#xff0c;其中也有使用到阿里云的上传SDK&#xff0c;过程中有遇一个上传SDK的内部崩溃&#xff0c;崩溃栈如下&#xff1a; Back traces starts. java.lang.NullPointerException: Attempt to invok…
阅读更多...
【Qt】—— Qt Creator界⾯认识

【Qt】—— Qt Creator界⾯认识

目录 &#xff08;一&#xff09;左边栏 &#xff08;二&#xff09;代码编辑区 &#xff08;三&#xff09;UI设计界⾯ &#xff08;四&#xff09;构建区 &#xff08;一&#xff09;左边栏 在编辑模式下&#xff0c;左边竖排的两个窗⼝叫做"边栏"。 ①是项⽬…
阅读更多...
指针的深入理解（三）

指针的深入理解（三）

这一节主要使用复习回调函数&#xff0c; 利用冒泡模拟实现qsort函数。 qsort 排序使用冒泡排序&#xff0c;主要难点在于运用元素个数和字节数以及基地址控制元素的比较&#xff1a; if里面使用了一个判断函数&#xff0c;qsort可以排序任意的数据&#xff0c;原因就是因为可…
阅读更多...
立体边界，让arcgis出图更酷炫一些

立体边界，让arcgis出图更酷炫一些

就是这样子的那个图—— 本期我们还是用长沙市为例&#xff0c; 来手把手的演示制作立体边界&#xff0c; 就是这个样子的边界—— 第一步—准备底图 其实你准备什么底图都可以哈&#xff0c;例如调用天地图、下载个影像图&#xff0c;或者用其他什么的底图&#xff0c;都是…
阅读更多...
如何使用Docker部署JSON Crack

如何使用Docker部署JSON Crack

文章目录 1. 在Linux上使用Docker安装JSONCrack2. 安装Cpolar内网穿透工具3. 配置JSON Crack界面公网地址4. 远程访问 JSONCrack 界面5. 固定 JSONCrack公网地址 JSON Crack 是一款免费的开源数据可视化应用程序&#xff0c;能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互…
阅读更多...
【数据结构】（分治策略）中位数的查询和最接近点对问题

【数据结构】（分治策略）中位数的查询和最接近点对问题

中位数查询&#xff1a; 寻找一组字符串中第k小的数&#xff0c;返回其值和下标。 不可以有重复值&#xff08;在缩小规模的时候&#xff0c;会导致程序死循环&#xff09; 相对位置的转换体现了分治策略的思想。> 划分函数 int partition(int *nums,int left, int rig…
阅读更多...
Unity点乘和叉乘

Unity点乘和叉乘

前言 Unity中经常会用到向量的运算来计算目标的方位&#xff0c;朝向&#xff0c;角度等相关数据&#xff0c;而这些计算中最常用的就是点乘和叉乘 点乘 一、点乘是什么&#xff1f; 定义&#xff1a;ab|a||b|cos<a,b> 【注&#xff1a;小写字母表示向量&#xff0c;&…
阅读更多...
精选70套前端数据可视化大屏

精选70套前端数据可视化大屏

分享70款还不错的前端数据可视化大屏源码 其中包含行业&#xff1a;智慧社区、智慧物业、政务系统、智慧交通、智慧工程、智慧医疗、智慧金融银行等&#xff0c;全网最新、最多&#xff0c;最全、最酷、最炫大数据可视化模板。 你可以点击在线预览查看该源码资源的最终展示效果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023