【webpack】初始化

webpack

          • 旧项目的问题
          • 下一代构建工具 Vite
      • 主角 :webpack
          • 安装webpack
          • 1,mode的选项
          • 2,使用source map 精准定位错误行数
          • 3,使用watch mode(观察模式),自动运行
          • 4,使用webpack-dev-server工具,自动刷新
      • 自定义webpack配置初始化代码
      • webpack处理资源模块(asset module)
          • asset/resource
          • asset/inline
          • asset/source
          • asset
      • 管理资源(loader)
          • css-loader
          • 抽离style里代码,并压缩
          • 知识点补充,在css里面加载图片资源
          • 知识点补充,加载fonts字体
          • 知识点补充,加载csv,tsv,xml数据
          • 自定义JSON模块parser
      • 使用babel-loader转换js文件
          • regeneratorRuntime插件

旧项目的问题

作用域问题

  • return 抛出赋给变量

如何解决代码拆分问题

  • module.exports()抛出模块
  • require()接受模块

如何让游览器支持node模块

下一代构建工具 Vite

主角 :webpack

  • 它可以帮助我们打包javascript的应用程序,
  • 同时支持es的模块化以及commonjs
  • 可以扩展支持很多的静态资源打包,图片,字体,样式等
  • 只能理解js和json这样的文件
  • 出色的功能:除了引入js还可以使用内置的资源模块

引用千峰教育一个图:
在这里插入图片描述

安装webpack

安1:npm init -y
安2:npm install webpack webpack-cli --save-dev
安3: npm install html-webpack-plugin -D

  • 执行完前两个会产生三个文件,第三个是为了自动引入资源
    在这里插入图片描述
1,mode的选项
  mode: 'none', //不展示编译时候的警告,还可以选择'development'
2,使用source map 精准定位错误行数
  • 当我们游览器报错,点击报错内容时,发现报错的指向不是源文件时候,不好排除错误
 devtool: 'inline-source-map', //可以精准的锁定出错位置行数,并且打包出的文件不再是乱码
3,使用watch mode(观察模式),自动运行
  • 每次编译代码,都需要手动运行npx webpack会显得很麻烦
  • 运行 npx webpack --watch
  • 但还有点问题,现在弄完还需要游览器再刷新一下,如何自动刷新游览器!
4,使用webpack-dev-server工具,自动刷新
  • 安4. npm install webpack-dev-server -D
  • 配置里面添加
 devServer: {static: './dist', //需要热模块更新的文件},

自定义webpack配置初始化代码

在本地开发环境里安装,所以加-D

// path.resolve(_dirname,'./dist'),获取文件的绝对路径,参数一,代表当前文件的物理路径,参数2是基于这个路径下的文件路径
const path = require('path');
// HtmlWebpackPlugin,可以自动引入资源文件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 入口文件的地址entry: './src/index.js',output: {// 指定输出文件的文件名filename: 'budle.js',// 指定输出路径,这个要设置为绝对路径,:webpack.config.js配置文件中----" dirname " 必须为两个下划线“_ _”,否则打包报错path: path.resolve(__dirname, './dist'),// 打包前清理上一次无用的打包内容clean: true,},// 不展示编译时候的警告,还可以选择'development'mode: 'none',// 可以精准的锁定出错位置行数,并且打包出的文件不再是乱码devtool: 'inline-source-map',plugins: [// 创建一个插件的实例对象new HtmlWebpackPlugin({template: './index.html', // 模板filename: 'app.html', // 输出的文件名,inject: 'body', // 自定义标签的放置位置,默认在head}),],//运行路径devServer: {static: './dist', //需要热模块更新的文件},
};

webpack处理资源模块(asset module)

  • 资源模块的类型,称之为asset module type
  • 四种类型
asset/resource
  • 会发送一个单独的文件并导出URL
output: {filename: 'budle.js',path: path.resolve(_dirname, './dist'), clean: true, // assetModuleFilename: 'images/test.png'//方法2:定义资源模块的输出包名//但是,不能每个文件名都叫这个名,所以要根据文件的内容来生成一个哈希的字符串,生成后缀名assetModuleFilename: 'images/[contenthash].[ext]', },
moduleS: {//加载资源模块rules: [{test: /\.png$/,type: 'asset/resource', //资源类型generator: {//方法1,优先级高filename: 'images/[contenthash][ext]', //修改生成的文件的文件名},},],},
asset/inline
  • 会导出一个资源的Data URL,但不会产生打包文件
  • 一般生成的就是游览器可查看的base64格式的路径
{test: /\.svg$/,type: 'asset/inline', //资源类型},
asset/source
  • 会导出资源的源代码,但不会产生打包文件
{test: /\.txt$/,type: 'asset/source', //资源类型},
asset
  • 会在导出一个Data URL和发送一个单独的文件之间自动进行选择
  • 自动的在resource和inline之间进行选择,小于8kb的文件,将会
    视为inline模块,否则会被视为resource模块类型

在这里插入图片描述

管理资源(loader)

  • 为了解决webpack只能理解js和json这样的文件,理解不了其他文件的问题
  • 支持链式调用且逆加载
css-loader

npm install css-loader -D
npm install style-loader -D //会帮助我们把css放置到页面上

  • 配置一下
{test: /\.css$/,use: ['style-loader', 'css-loader'],//顺序不能颠倒
},

在这里插入图片描述

  • 想要加载less,sass等这样的css文件
  • npm install less-loader less -D
  • 配置完需要重新启动一下
{test: /\.(css|less)$/,use: ['style-loader', 'css-loader''less-loader'],//顺序不能颠倒
},
抽离style里代码,并压缩
  • 目前,上面的css和页面在一起
  • 想要将style里面的这些代码抽离出来
  • npm Install mini-css-extract-plugin -D
  • 依赖webpack5环境,接下来开始配置
  • 步骤一:导入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//MiniCssExtractPlugin,把css提取到单独的文件中
  • 步骤二:实例化一下

  • 并且可以修改存放文件名
    在这里插入图片描述
    在这里插入图片描述

  • 步骤三:添加loader
    在这里插入图片描述

  • 步骤四:文件打包了,但没有压缩

  • 解决思路

  • npm install css-minimizer-webpack-plugin -D

  • 步骤一:导入

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//压缩css文件
  • 步骤二:在优化的配置里面配置
    在这里插入图片描述
  • 步骤三:
    在这里插入图片描述
知识点补充,在css里面加载图片资源

在这里插入图片描述

知识点补充,加载fonts字体
  • 像字体这样的其他资源如何可以接收并加载任何文件,然后将其输出到构建目录

  • 步骤一,配置
    在这里插入图片描述

  • 步骤二.
    在这里插入图片描述在这里插入图片描述

知识点补充,加载csv,tsv,xml数据
  • 可以使用csv-loader和xml-loader
  • npm install csv-loader xml-loader -D
    在这里插入图片描述
  • 步骤二:在使用的js文件中引入要使用的文件即可
import Xml from './assets/data.xml';
import Csv from './assets/data.csv';
自定义JSON模块parser
  • 替代特定的webpack loader,可以将任何toml,yaml或json5文件作为JSON模块导入
  • npm install toml yaml json5 -D
    在这里插入图片描述
  • 步骤三,正常引入使用即可
    在这里插入图片描述
    在这里插入图片描述

使用babel-loader转换js文件

  • npm install babel-loader @babel/core @babel/preset-env -D
  • 因为webpack只能做js模块化的打包,并不能转化js里的代码,所以babel-loader转换
  • 将ES6转换成低版本的游览器能够识别的ES代码
  • 注意点;这样写会将nodemodule中的js也编译,所以需要排除一下
  • 使用exclude属性
    引用千峰教育
regeneratorRuntime插件
  • 运行上述babel-loader的项目,发现有报错regeneratorRuntime

  • regeneratorRuntime是webpack打包生成的全局辅助函数,由babel生成,用于兼容async/await的语法
    在这里插入图片描述

  • 最后,修改一下配置
    在这里插入图片描述

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

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

相关文章

【Flutter】vs2022上开发flutter

在vs上开发flutter,结果扩展仓库上没办法找到Dart,Flutter。 在 这 搜索Dart时也无法找到插件。 最后发现是安装工具出错了 安装了 开发需要的是

UDS诊断 10服务

文章目录 简介诊断会话切换请求和响应1、请求2、子功能3、肯定响应4、否定响应5、特殊的NRC 为什么划分不同会话报文示例UDS中常用 NRC参考 简介 10服务,即 Diagnostic Session Control(诊断会话控制)服务用于启用服务器中的不同诊断会话&am…

HTML5+CSS3小实例:3D翻转Tab选项卡切换特效

实例:3D翻转Tab选项卡切换特效 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=…

Jsoup爬取HTTPS页面数据资源,并导入数据库(Java)

一、实现思路 示例页面&#xff1a; 2020年12月中华人民共和国县以上行政区划代码 忽略https请求的SSL证书通过Jsoup获取页面标签遍历行标签&#xff0c;分别获取每个行标签的第二个和第三个列标签将获取到的行政代码和单位名称分别插入sql语句占位符执行sql语句&#xff0c…

Ray构建GPU隔离的机器学习平台

Ray框架介绍 Ray 是一个开源分布式计算框架,在 机器学习基础设施中发挥着至关重要的作用。Ray 促进分布式机器学习训练,使机器学习从业者能够有效利用多个 GPU 的能力。 Ray可以在集群上分布式地运行任务,并且可以指定任务运行时需要使用的GPU数量。Ray可与Nvidia-docker等…

ChatGPT/GPT4科研实践篇: AI绘图+论文写作+编程

1、熟练掌握ChatGPT提示词技巧及各种应用方法&#xff0c;并成为工作中的助手。 2、通过案例掌握ChatGPT撰写、修改论文及工作报告&#xff0c;提供写作能力及优化工作 3、熟练掌握ChatGPT融合相关插件的应用&#xff0c;完成数据分析、编程以及深度学习等相关科研项目。 4、…

基于ssm vue协同过滤算法的图书推荐系统源码和论文

基于ssm vue协同过滤算法的图书推荐系统源码和论文742 idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 开发技术 ssm 摘 要 “互联网”的战略实施后&#xff0c;很多行业的信息化水平都有了很大的提升。但是目前很多行业…

Matlab 点云曲线探测(算法不稳定,仅用于学习)

文章目录 一、简介二、实现代码三、实现效果参考文献一、简介 这是一个很有趣的曲线探测的方法,不过我没有复现出论文中那样的效果,可能是理解有误,但这个算法仍然是很有意思,故这里也对其进行记录。 按照论文中的思路,首先我们需要通过一种线性强度图来计算确定每个点的法…

三层交换机配置DHCP服务

第一步&#xff1a;进入二层交换机Switch 1&#xff09;输入命令&#xff1a; Switch(config)#vlan 10 Switch(config)#vlan 20 2&#xff09;修改F0/1 和F0/2为access口&#xff0c;F0/24为trunk口 第二步&#xff1a;进入三层交换机 1&#xff09;输入命令 Switch(config)#…

Jenkins中文官网地址

Jenkins中文官网地址&#xff1a; Jenkins 用户手册Jenkins 是一个开源自动化服务器https://www.jenkins.io/zh/doc/

linux文件查找

grep: 文件内容过滤 [rootzaotounan ~]# grep 文件内容 路径 #从某个路径下的文件中过滤拥有文件内容的字段 ​ [rootzaotounan ~]# grep -r #递归查找 查找命令配置文件位置 查找命令位置 [rootzaotounan ~]# which 命令名 ​ 查找配置文件位置 [rootzaotounan ~]# wherei…

【Java用法】Lombok中@SneakyThrows注解的使用方法和作用

Lombok中SneakyThrows注解的使用方法和作用 一、SneakyThrows的作用二、SneakyThrows注解原理 一、SneakyThrows的作用 普通Exception类,也就是我们常说的受检异常或者Checked Exception会强制要求抛出它的方法声明throws&#xff0c;调用者必须显示的去处理这个异常。设计的目…