Webpack详解与配置环境

webpack:webpack网址

1、工作原理:

Webpack是一个非常强大的静态模块的打包工具。从文件入口开始,递归解析以来关系,然后将所有模块打包成一个或多个budle文件。

2、webpack核心概念:


Entry:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

Loader:loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。

Plugins: loader 被用于转换某些类型的模块,而plugins(插件)则可以用于执行范围更广的任务。 插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务(包括:打包优化,资源管理,注入环境变量)

1.入口( entry ):

entry 对象是用于 webpack 查找启动并构建 bundle 。entry 是应用程序的起点入口,从这个起点开始,应用程序启动执行。如果传递一个数组,那么数组的每一项都会执行。入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图(dependency graph ) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的

简单规则:每个 HTML 页面都有一个入口起点。单页应用(SPA):一个入口起点,多页应用(MPA):多个入口起点。

默认值是 ./src/index.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

//单入口--字符串
module.exports = {entry: './path/to/my/entry/file.js',
};
//多入口--数组
module.exports = {entry: ['./src/index.js', './src/add.js']
};
//多入口--对象
module.exports = {entry: {home: './home.js',about: './about.js',contact: './contact.js'}
};

entry 的值类型:

字符串:单入口,打包形成一个chunk,最终只会输出一个 bundle 文件,chunk 的名称默认是 main

数组:多入口,所有的入口文件最终也只会形成一个chunk,最终输出一个 bundle 文件,chunk 的名称默认为 main 。一般只用在 HMR 功能中让html热更新生效

对象:多入口,有多少个 key 就会形成多少个chunk,也就输出多少个 bundle 文件,每个键(key)会是 chunk 的名称。在对象类型中,每个key的值还可以是一个数组,不仅仅是一个字符串

2.输出( output ):

//webpack.config.js
const path = require('path');
module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js', },
};

2.1:output .filename(文件名和目录)

此选项决定了每个输出 bundle 的目录和名称。这些 bundle 将写入到 output.path 选项指定的目录下。

对于单个入口起点,filename 会是一个静态名称。然而,当通过多个入口起点( entry point)、代码拆分( code splitting )或各种插件(plugin)创建多个 bundle ,应该使用其他方法来让每个 bundle 都有一个唯一的名称。

module.exports = {//...output: {filename: 'js/bundle.js'}
};
//多入口--使用入口名称:
module.exports = {//...output: {filename: '[name].bundle.js'}
};
//多入口--使用每次构建过程中,唯一的 hash 生成
module.exports = {//...output: {filename: '[name].[hash].bundle.js'}
};
...

2.2、 output .path(文件目录)

output .path 指定所有输出文件的目录,即将来所有资源输出的公共目录。path 必须是绝对路径。

module.exports = {//...output: {path: path.resolve(__dirname, 'dist')}
};

2.3、 output .publicPath(引用资源的路径前缀)

publicPath 指定的是 html 文件中的所有资源引入的公共路径前缀。它并不会对生成文件的路径造成影响,而是在 html 文件引入各种资源时,将 publicPath 作为前缀加到引入资源的路径前面。

实例:

在 vue-cli 生成的 webpack 配置中,生产环境下 publicPath 的值默认是 '/',即当前目录的根目录。

打包过后,我们打开 html 文件,可以看到 html 文件中引入的资源路径为:

可以看到,都在路径前面加了 / 符号。当我们打开浏览器访问生成的 html 文件时,会发现报错,资源访问不到,报404,此时资源的访问类似如下:

在服务器上可能会是如下,但访问一样可能会有问题。

我们可以将 publicPath 修改为相对路径,或者直接把它注释掉也行。

3.Loader:

在 webpack 的配置中,loader 有两个属性:

test 属性,识别出哪些文件会被转换。

use 属性,定义出在进行转换时,应该使用哪个 loader。

include/exclude(可选):手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)

query(可选):为loaders提供额外的设置选项

//示例:webpack.config.js
const path = require('path');
module.exports = {output: {filename: 'my-first-webpack.bundle.js',},module: {rules: [{ test: /\.txt$/, loader: 'raw-loader' },{ test: /\.css$/, use: ['style-loader', 'css-loader'] }   //使用多个loader的话应该用 use], },
};

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这相当于告诉 webpack 编译器在碰到 require()/import 语句中被解析为 '.txt' 的路径时,在对它打包之前,先使用raw-loader 转换一下。

使用多个loader的话应该用 use ,use 数组中的 loader 执行顺序:从右到左,依次执行。比如上面的 css 文件,首先 css-loader 会将 css 文件编译成 JS 加载到 JS文件中,然后再由 style-loader 创建 style 标签,将 JS 中的样式资源插入到 head 标签中。

1.1、CSS-loader

webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同。css-loader使你能够使用类似import的方法来引入 css 文件,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中,由此就可以在JS文件中引入css文件了
 

//安装
npm install --save-dev style-loader css-loader  //css-loader版本太高编译可能会出错,建议降低版本比如 css-loader@1.0.1 可用
//使用
module.exports = {...module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/},{test: /\.css$/,  //对同一个文件引入多个loader的方法。loader的作用顺序是后面的loader先开始作用use: [{loader: "style-loader"}, {loader: "css-loader"}]}]}
};

4.插件(plugin)

Loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,包括:打包优化、压缩、资源管理、注入环境变量等。插件目的在于解决 loader 无法实现的其他事。

要使用某个插件,我们需要通过npm安装它,然后在 plugins 属性下添加该插件的一个实例。由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。多数插件可以通过选项自定义,你也可以在一个配置文件中因为不同目的而多次使用同一个插件。

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

4.1、案例 BannerPlugin插件(添加版权说明)

下面我们添加了一个给打包后代码添加版权声明的插件。该插件是webpack中的内置插件不用安装。

const webpack = require('webpack');
module.exports = {
...module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/},{test: /\.css$/,use: [{loader: "style-loader"}, {loader: "css-loader",options: {modules: true}}, {loader: "postcss-loader"}]}]},plugins: [new webpack.BannerPlugin('wenxuehai版权所有,翻版必究')],
};

3、Webpack打包过程

读取配置文件:Webpack会首先读取项目中的配置文件,例如webpack.config.js或者webpackfile.js等。

解析入口文件:Webpack会从配置文件中获取入口文件路径,根据入口文件路径解析出入口文件及其依赖的模块。

解析依赖模块:Webpack会逐个解析入口文件依赖的模块,以此类推,逐步构建出完整依赖树。

加载模块:Webpack会根据解析出的模块路径逐个加载模块,支持多种文件格式的加载。

分析模块依赖关系及模块交互:Webpack会分析每个模块之间的依赖关系,例如调用其它模块的函数或变量引用等,以此建立模块之间的交互关系图。

打包模块:Webpack会将所有模块根据依赖树的关系,逐步打包成一个或多个JavaScript文件,支持多种打包方式。

生成输出文件:Webpack会根据配置文件中指定的输出路径和文件名,生成最终的输出文件。

优化打包结果:Webpack还提供了一些优化功能,例如压缩代码、合并模块等,可以进一步提升打包结果的性能和效率。

构建完成:Webpack打包过程完成后,会输出一些统计信息以及警告或错误信息,方便开发者定位和解决问题。

4、Webpack生命周期:

Webpack 在构建过程中会触发一系列的生命周期事件,开发者可以针对这些事件进行相应的处理或插件化。下面是Webpack的主要生命周期事件:

beforeRun:在 Webpack 开始执行构建任务前触发的事件。
run:Webpack 开始进行编译打包时触发的事件。
beforeCompile:在 Webpack 开始编译之前触发的事件。
compile:Webpack 开始编译时触发的事件。
compilation:在 Webpack 的每次编译构建过程中触发的事件。
emit:在 Webpack 输出资源到output目录之前触发的事件。
afterEmit:在 Webpack 输出资源到output目录之后触发的事件。
done:Webpack 构建完成所有的编译、和输出等任务之后触发的事件。
failed:Webpack 构建过程中出现错误时触发的事件。

webpack配置vue3开发环境

1.npm i -D webpack webpack-cli webpack-dev-server

webpack是基本的包
webpack-cli是执行脚本的包
webpack-dev-server是启动一个开发服务器的包

2.配置html-webpack-plugin插件

       2.1 npm i -D html-webpack-plugin

       2.2 在项目根目录下创建index.html模板和下载html-webpack-plugin插件,然后修改index.html文件,添加一个id为root的div标签,再在webpack.config.js中配置html插件.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><h1>123</h1></body>
</html>

3.下载vue和vue-loader(webpack默认不识别.vue结尾的文件,需要下载loader解析)vue-loader文档地址,安装成功之后配置webpack.config.js,然后编写入口文件index.js导入vue。

        3.1 

                npm i vue
                npm i -D vue-loader

4.手动添加css-loader

         npm i -D vue-style-loader css-loader


5.手动添加sass和sass-loader

        npm i sass
        npm i -D sass-loader

 

6.package.json脚本 添加webpack打包指令

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","webpackbuild": "webpack"}

7.添加typescript支持和ts-loader。vue-loader支持ts

因为要支持typescript,首先使用tsc --init在项目根目录下生成一个tsconfig.json文件,然后修改index.js为index.ts,当然webpack.config.js中的入口文件的index.js也需要修改为index.ts,然后添加参考vue-loader的文档添加ts-loader配置。因为要使ts识别vue,要在根目录添加一个env.d.ts的声明文件

        7.1

                 npm install -D typescript ts-loader

// webpack.config.js
module.exports = {resolve: {// 将 `.ts` 添加为一个可解析的扩展名。extensions: ['.ts', '.js']},module: {rules: [// ... 忽略其它规则{test: /\.ts$/,loader: 'ts-loader',options: { appendTsSuffixTo: [/\.vue$/] }}]},// ...plugin omitted
}
// env.d.ts
declare module "*.vue" {import { DefineComponent } from "vue"const component: DefineComponent<{}, {}, any>export default component
}
<template><div class="container"><h1>hello</h1></div>
</template><script setup lang="ts">
import { ref, Ref } from "vue";
const count: Ref<number> = ref(123);
</script><style scoped lang="scss">
.one {color: yellowgreen;
}
</style>

需要修改tsconfig.json中的strict为false,这样可以避免一些小问题。

或 

添加:

  "javascript.validate.enable": false

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android的Launch

看了一下资料&#xff0c;其实差别并不像一般的bootloader之类那么大。基本上还是和普通的APK程序差不多&#xff0c;基本上是AMS启动的第一个带界面的程序&#xff0c;这个界面也是常规的开发模式。可以设置各种view&#xff0c;可以设置背景。 然后在这个程序中&#xff0c;…

JVM:垃圾回收器 垃圾收集器分类 评估GC的性能指标

GC&#xff1a;垃圾回收或者垃圾收集器 一、垃圾收集器分类&#xff1a; 1.1按用于垃圾回收的线程数分类 分为串行垃圾回收器和并行垃圾回收器 指的是在同一时间段内只允许有一个CPU用于执行垃圾回收操作&#xff0c;此时工作线程被暂停&#xff0c;直至垃圾收集工作结束  …

如何使用 yum 在 CentOS 6 上安装 nginx

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 状态 状态&#xff1a; 已弃用 本文涵盖的 CentOS 版本已不再受支持。如果您目前正在运行 CentOS 6 服务器&#xff0c;我们强烈建议升…

模板:系统建设方案

系统建设方案是一个综合性的文档&#xff0c;旨在详细规划、设计和实施一个特定的系统。以下是一个通用的系统建设方案框架&#xff0c;涵盖了从需求分析到系统上线及后期维护的各个阶段&#xff1a; 一、项目简介 1.1 项目名称 明确项目的具体名称&#xff0c;以便后续文档…

Linux——redis理论、安全模型

一、redis 主要的data type redis 的原生客户端redis 支持通过python php golang 等语言连接redis 主要适用场景 二、redis如何进行数据存储 非关系数据库 不使用二维表 redis 使用键值对完成数据的存储redis一共有16个库 &#xff0c;不同的库使用编号 0-15redis 在…

设计模式-装饰器代理观察者

3.7 装饰器模式&#xff08;代码见vs&#xff09; 装饰器又叫做包装模式&#xff0c;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种模式创建了一个装饰类&#xff0c;用来包装原有的类&#xff0c;并在保持类方法完整性的前提下&#xff0c;提供了额…

经验笔记:负载均衡

负载均衡经验笔记 负载均衡是现代分布式系统中不可或缺的一部分&#xff0c;旨在通过优化资源利用率、最大化吞吐量、最小化响应时间、避免过载等方式来改善服务质量和用户体验。以下是关于负载均衡的一些经验和指导原则&#xff0c;包括多种实现方式。 1. 理解负载均衡的基本…

力扣1.两数之和(哈希表)

class Solution {// 定义一个名为twoSum的方法&#xff0c;接收一个整数数组nums和一个整数target作为参数public int[] twoSum(int[] nums, int target) {// 创建一个HashMap&#xff0c;用于存储数组中的元素及其对应的索引Map<Integer, Integer> map new HashMap<…

前端报文加密

前端加密功能 前端提供简单的AES对称加密算法&#xff0c;注意key 和后端网关配置相同&#xff0c;这里打包混淆后&#xff0c;相对安全。 &#xff08;lun-ui\src\store\modules\user.js、base-gateway-dev.yml&#xff09; 后端解密功能 使用hutool提供的工具类进行解密pub…

Linux之grafana+onealert报警

grafana介绍 Grafana是一个开源的度量分析和可视化工具&#xff0c;可以通过将采集的数据分析&#xff0c;查询&#xff0c;然后进行可视化的展示,并能实现报警。 grafana安装与登录 在grafana服务器上安装grafana 下载地址&#xff1a;https://grafana.com/grafana/downloa…

Opencv中的直方图(4)局部直方图均衡技术函数createCLAHE()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 创建一个指向 cv::CLAHE 类的智能指针并初始化它。 函数原型 Ptr<CLAHE> cv::createCLAHE (double clipLimit 40.0,Size tileGridSize…

关于Harmony的学习

day20 一、ES5严格模式 ES5提出严格模式&#xff0c;能让代码更规范&#xff0c;分为全局和局部。 进入严格模式语法&#xff1a;use strict 规则&#xff1a;①声明变量时必须使用var&#xff0c;不然会报错。 ②函数参数不能有重复的名称 ③函数名称括号调用函数&#xff…

Android UI绘制流程

UI绘制流程&#xff0c;Activity、Dialog、PopupWindow等 -- android系统的事件分发流程分为很多部分&#xff1a; Native层 –> ViewRootImpl层 –> DecorView层 –> Activity层 –> ViewGroup层 –> View层。 其实Toast窗口和Activity、Dialog、PopupWindow有…

12、Django Admin在列表视图页面上显示计算字段

两种方法&#xff1a; 注册模型有两种方式&#xff0c;需要首先添加或者修改admin中的注册模型如下方式 admin.register(Origin) class OriginAdmin(admin.ModelAdmin):list_display ("name",) 1、在models的模型类中添加函数 def hero_count(self,):return sel…

评价决策类——层次分析法+数学建模+实战分析

目录 一、前言 二、历年题型分析 2.1 常用算法归纳 2.1.1 优化类算法 2.1.2 预测类算法 2.1.3 评价决策类 2.1.4 NP-hard类 2.2 评价类模型求解 2.2.1 层次分析法&#xff08;AHP&#xff09; 2.2.2 多指标评价法&#xff08;MCDA&#xff09; 2.2.3 算法区别 三、层…

如何把自动获取的ip地址固定

在大多数网络环境中&#xff0c;‌设备通常会自动从DHCP服务器获取IP地址。‌这种动态分配IP的方式虽然灵活方便&#xff0c;‌但在某些特定场景下&#xff0c;‌我们可能需要将设备的IP地址固定下来&#xff0c;‌以确保网络连接的稳定性和可访问性。‌本文将详细介绍如何把自…

电子计算机科学中的前端技术:概念、历史、现状与展望?

电子计算机科学中的前端技术&#xff1a;概念、历史、现状与展望&#xff1f; 李升伟 前端技术是创建 Web 页面或 App 等前端界面呈现给用户的过程&#xff0c;通过 HTML、CSS、JavaScript 以及衍生出来的各种技术、框架、解决方案&#xff0c;来实现互联网产品的用户界面交互…

MySQL-基础篇-事务(事务简介、事务操作、事务的四大特性、并发事务引发的问题、事务的隔离级别)

文章目录 1. 事务简介2. 事务操作2.1 未控制事务2.2 控制事务2.2.1 查看事务的提交方式2.2.2 设置事务的提交方式2.2.3 提交事务2.2.4 回滚事务2.2.5 开启事务2.2.6 完善转账案例 3. 事务的四大特性&#xff08;ACID&#xff09;4. 并发事务引发的问题5. 事务隔离级别5.1 演示5…

羊大师:白露养生经,羊奶不可少

随着秋风渐起&#xff0c;白露悄然而至&#xff0c;自然界中的万物开始展现出成熟与收获的喜悦。在这个季节转换的微妙时刻&#xff0c;我们的身体也需要顺应天时&#xff0c;进行一番细致的调养。白露养生&#xff0c;不仅是对自然的敬畏&#xff0c;更是对健康生活的追求。 在…

橘子学ES实战操作之管道类型Ingest pipelines的基本使用

简介 我们在使用ES的时候&#xff0c;经常的用法就是把其他数据源比如Mysql的数据灌到ES中。 借用ES的一些功能来提供数据的全文检索以及聚合分析之类的功能。 在这个灌数据的过程中&#xff0c;我们经常会对数据做一些治理&#xff0c;类似ETL的能力。然后把治理后的数据写入…