webpack使用

一、简介

概述

本次使用webpack4进行构建打包

二、webpack

安装webpack、webpack-cli

npm install webpack@4.2.0 webpack-cli@4.2.0 -D

三、loader

加载器概述

  • raw-loader:加载文件原始内容(utf-8)

  • file-loader:把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件

  • url-loader:和file-loader类似,但是能在文件很小的情况下以base64的方式把文件内容注入到代码中

  • source-map-loader:加载额外的Source Map文件,以方便断点调试

  • svg-inline-loader:将压缩后的 SVG 内容注入代码中

  • image-loader:加载并且压缩图片文件

  • handlebars-loader: 将 Handlebars 模版编译成函数并返回

  • babel-loader:把ES6转化成ES5

    let----降级---->plugin

    箭头函数----降级—>plugin

  • ts-loader: 将 TypeScript 转换成 JavaScript

  • awesome-typescript-loader:将 TypeScript 转换成 JavaScript,性能优于 ts-loader

  • css-loader:加载css,支持模块化、压缩、文件导入等特性,帮我们分析出各个css文件之间的关系,把各个css文件合并成一段css;

  • style-loader:把css代码注入到js中,通过DOM操作去加载css

  • eslint-loader:通过ESLint检查JS代码

  • tslint-loader:通过 TSLint检查 TypeScript 代码

  • postcss-loader:扩展 CSS 语法,使用下一代 CSS,可以配合 autoprefixer 插件自动补齐 CSS3 前缀

  • vue-loader:加载 Vue.js 单文件组件,它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理

  • cache-loader: 可以在一些性能开销较大的 Loader 之前添加,目的是将结果缓存到磁盘里

1.安装sass加载器和模块

其实之所以用到node-sass、是因为sass-loader的缘故。sass-loader 是将sass文件编译成css,而sass-loader又依赖于node-sass,所以需要安装node-sass

npm install node-sass sass-loader -D
2.安装css加载器和安装style加载器

大概流程是,css loader将css包裹成js, 传给style loader 然后style loader再将它处理成一个立即执行函数封装到bundle中. 这个立即执行函数会生成一个style标签嵌入到HTML页面中

  • css-loader:加载css,支持模块化、压缩、文件导入等特性

  • style-loader:把css代码注入到js中,通过DOM操作去加载css

npm install css-loader  style-loader -D
npm install style-loader -D
3.安装ts加载器

将 TypeScript 转换成 JavaScript

npm install ts-loader -D
4.安装vue加载器

它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理

npm install vue-loader@15.10.1 -D
5.安装babel加载器

能够把es6高级内容变为es5,es6/es7/es8等等高级标准有很多(let、箭头函数、对象解构赋值、…展开运算符、反勾号字符串等等),每个标准都需要一个独立的plugin进行降级处理,如果使用许多高级标准内容,那么势必要为此安装许多plugin,这样工作比较繁琐,系统已经考虑到这点了,其通过preset把许多常用的plugin给做了集合,因此一般性的使用只需要安装preset即可搞定(如果项目应用到了一个生僻的高级标准内容,preset处理不来,就还需要再安装对应的plugin处理)

npm i babel-loader @babel/core @babel/preset-env -D 
{test: /.js$/,exclude: /node_modules/,  // 排除目录use: [{loader:'babel-loader',options: {presets: ['@babel/preset-env']}}]  // es6转es5
} 
​

说明: @babel/preset-env用来指定按什么样的预设来进行降级处理

  1. 打包测试 打包之后,去打包后的文件中检查是否已经把const和箭头函数这种es6的代码转成了es5的代码。

6.PostCSS
  • PostCSS是一个通过JavaScript来转成样式的工具

  • 这个工具可以帮助我们进行一些css的转化和适配,比如自动添加浏览前缀,css样式的重置

PostCSS内部也是通过各种插件来实现转化的,所以需要安装各种插件来使用

npm install postcss-loader -D
npm install autoprefixer -D   //需要安装插件,添加浏览器前缀的
module: {rules: [{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader', {loader: 'postcss-loader',options: {//可以提出一个单独的文件postcssOptions: {plugins: [require('autoprefixer')]}}}]}]
}

当使用postcss-loader的时候,会先查找有不有自己options选项,如果没有就去查找postcss.config.js这个配置文件

postcss.config.js

module.exports = {plugins: [require('autoprefixer')]
}

webpack.config.js

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

postcss-preset-env

一个比较强大的postcss插件

它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境 添加所需的polyfill;

也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer)

安装:

npm install postcss-preset-env -D

使用:

跟autoprefixer使用是一样的,可以直接用postcss-preset-env替换autoprefixer

效果也是一样的

7. file-loader

file-loader的作用就是帮助我们处理import / require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中

在使用图片有两种形式,一种是背景图片另外一种是img标签

//简单创建一个img标签import image from '../imgs/mode.png'const el = document.createElement('img')el.src = imagedocument.body.appendChild(el)

注意:当使用img标签的时候,我们把图片看成是一个模块,不要直接写成是一个字符串

安装

npm install file-loader -D

使用

//webpack.config.jsmodule: {rules: [{test: /\.(jpe?g|png|gif|svg)$/i,use: [{loader: 'file-loader'}]}]
}

上面的配置,可以直接展示出图片来了,也就说明加载成功了。

但是还是存在一种不是很友好的现象

打包过后的文件,就直接存在build文件夹中,如果是一张图片还好,如果有很多张图片,就会造成打包文件夹的结构混乱。图片被打包的文件名是32位hash值,我们不能分辨哪张是对应的哪张图片。所以需要进行处理。

所以需要对file-loader进行options配置

常见的配置:
[ext] 处理文件的扩展名
[name] 处理文件的名字
[hash:] 截取hash的长度,默认的32个字符太长了
[path] 文件相对于webpack配置文件的路径
//重新对file-loader进行配置
module: {rules: [{test: /\.(jpe?g|png|gif|svg)$/i,use: [{loader: 'file-loader',options: {//在打包的文件夹中创建一个images文件夹,用来保存图片的outputPath: 'images',//给图片取名字name: "[name]_[hash:8].[ext]"}}]}]
}

效果图:

8.url-loader

url-loader跟file-loader的工作原理是一样的

url-loader的区别: 就是对图片有限制,对图片较小的进行base64编码

所以会发现,打包过后的文件,就一个build.js,而且里面都还是base64

这也不是我们想要的,只对限制一下的图片,进行base64的转换。

为什么呢?

小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程
而大的图片也进行转换,反而会影响页面的请求速度

小于100kb的图片,进行转化

{test: /\.(jpe?g|png|gif|svg)$/,use: [{loader: 'url-loader',options: {//在打包的文件夹中创建一个images文件夹,用来保存图片的outputPath: 'images',//给图片取名字name: "[name]_[hash:8].[ext]",//配置limitlimit: 100 * 1024}}]
}
9.加载数据(CSV/TSV/XML)

除了js,json,images, 可以加载的有用数据还有CSV/TSV/XML,要导入CSV, TSV和XML,可以

使用csv-loader和xml-loader

安装插件:

npm i csv-loader xml-loader -D
module.exports = {...module: {rules: [{test: /\.(csv|tsv)$/,use: 'csv-loader'},{test: /\.xml$/,use: 'xml-loader'}]}
}

四、插件(Plugin)

1.webpack-dev-server

项目开发都是对src目录内部的文件进行更新,不要去修改dist打包好的文件,现在对src内部的任何文件做修改操作后,都需要重新打包,才可以看到对应效果

npm i webpack-dev-server  -D

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

module.exports = {// 其他省略....// 配置 webpack-dev-server的选项devServer: {host: '127.0.0.1',  // 配置启动ip地址port: 10088,  // 配置端口open: true  // 配置是否自动打开浏览器}
} 

在package.json中补充一个script

"scripts": {
+    "dev": "webpack-dev-server",  // 它默认会找webpack.config.js文件"build": "webpack-dev-server --config  webpack.config.js" // 指定使用webpack.config.js配置文件文件
}, 
  1. 启动命令 现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。

  2. 测试

    • 修改.js代码,

    • 修改.css代码,检查是否会重启

2.HtmlWebpackPlugin
npm i html-webpack-plugin -D
const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={plugins:[new HtmlWebpackPlugin({//设置模板文件template:'./src/index.html',//使用打包后的模板文件filename:'index.html'//打包后文件的名字}) ,]  
}

上述的这个如果需要在index中假如一些自动以的内容是根据development与production不同,而添加不同的内容。在这里html-webpack-plugin插件已经帮助我们做好了这部分。在你需要打包是自动需要假如的内容 使用

  <%= htmlWebpackPlugin.options.urlScript %>

要说明的是urlScript 这个是我们自己定义的,你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中

const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={plugins:[new HtmlWebpackPlugin({//设置模板文件template:'./src/index.html',//使用打包后的模板文件filename:'index.html'//打包后文件的名字urlScript:'<script src="./js/zepto.min.js"></script> '//---<<---就这里}) ,]  
}

未经过html转换的文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title>
<head>
<body> 
</body><%= htmlWebpackPlugin.options.urlScript %>
</html>

经过 html-webpack-plugin 的转换之后就会变成

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title>
<head>
<body> 
</body><script src="./js/zepto.min.js"></script>  -->>之前的标间就被替换成为了 我们之前的插件设置的内容了,这个很有用
</html>
3.VueLoaderPlugin

作用是 对本次webpack编译的所有rules做操作,添加pitch-loader和vue-loader,进行一个顺序的重新排放,

最终rule中的顺序是这样的: [ pitch-loader, … … , vue-loader] (pitcher在在开始,vue-loader在最后,这一切是通过把...clonedrule放到中间来实现的)

( * pitchloader的resourceQuery函数表明了,这个loader只会对request中带有vue字段query的request使用pitchloader)

4. process
 npm i --save-dev process
5.抽离css为单独的文件

安装抽离css为单独文件的插件:该插件基于webpack5构成,主要是把style标签引入css转化为link

引入css

安装插件:

npm i mini-css-extract-plugin -D

配置:

// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {...plugins: [new MiniCssExtractPlugin({// 指定抽离的之后形成的文件名filename: 'styles/[contenthash].css'})],module: {rules: [// 处理后缀名为.css或者是.less的文件{test: /\.(css|less)$/,// stuyle-loader作用是在 head 中创建 style 标签// MiniCssExtractPlugin.loader是将css抽离为独立的文件use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']}]}
}

五、CSS优化(压缩)

安装插件:

npm i css-minimizer-webpack-plugin -D

配置:

/ 引入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")module.exports = {...// 优化配置项optimization: {minimizer: [// 使用插件优化 css 代码new CssMinimizerPlugin()],},// 模式,因为压缩css代码只在生产模式下生效mode: 'production'
}

六、字体资源

通过 CSS 引入字体资源

@font-face {font-family: 'PujiSansExpandedHeavy';src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;}

配置:

module.exports = {...module: {rules: [// 配置字体文件{test: /\.(woff|woff2|eot|ttf|otf)$/,// asset/resource可以帮助我们载入任何类型type: 'asset/resource'}]}
}

Node API 方式

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {entry: './path/to/my/entry/file.js',output: {filename: 'my-first-webpack.bundle.js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.(js|jsx)$/,use: 'babel-loader',},],},plugins: [new webpack.ProgressPlugin(),new HtmlWebpackPlugin({ template: './src/index.html' }),],
};

在使用 Node API 时,还可以通过配置中的 plugins 属性传入插件。

some-node-script.js

const webpack = require('webpack'); // 访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');let compiler = webpack(configuration);new webpack.ProgressPlugin().apply(compiler);compiler.run(function (err, stats) {// ...
});

webpack打包成的dist启动运行

安装express-generator生成器

npm install express-generator -g

创建一个express项目 执行express expressDemo(expressDemo是项目名)

expressDemo项目目录如下图:

进入expressDemo目录,安装项目依赖 执行npm install

把dist目录下的所有文件复制到express项目的public文件夹下

运行npm start启动expressDemo项目,打开浏览器,输入http://localhost:3000即可访问。

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

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

相关文章

CentOS 7 中安装 docker 环境

作者&#xff1a;程序那点事儿 日期&#xff1a;2023/02/15 02:31 官网地址 官网文档 docker三种网络模式 Docker CE 支持 64 位版本 CentOS 7&#xff0c;并且要求内核版本不低于 3.10&#xff0c; CentOS 7 满足最低内核的要求。 Docker 分为 CE 和 EE 两大版本。CE 即社区…

蓝桥杯1.小蓝的漆房

样例输入 2 5 2 1 1 2 2 1 6 2 1 2 2 3 3 3样例输出 1 2 import math import os import sys tint(input())#执行的次数 for j in range(t):n,kmap(int,input().split())#n为房间数 k为一次能涂的个数alist(map(int,input().split()))#以列表的形式存放房间的颜色maxvaluemath…

81、Python之鸭子类型:从魔法函数看对象的字符串呈现

引言 前面已经介绍了鸭子类型的概念&#xff0c;以及Python中支撑鸭子类型理念的“魔法函数”的体系。Python中的魔法函数分为几大类&#xff0c;本文我们首先从最简单的自定义类型的字符串呈现来切入&#xff0c;逐步理解并掌握Python中的魔法函数的完整架构。 本文的主要内…

玩转指针(3)

一、字符指针变量 字符指针变量&#xff08;如char* p&#xff09;的两种赋值方式 ①将字符类型地址赋值给字符指针变量 int main() {char a w;char* p &a;*p m;return 0; }②将常量字符串赋值给字符指针变量 常量字符串的介绍&#xff1a;用" "引起来的就…

以Flask为基础的虾皮Shopee“曲线滑块验证码”识别系统部署

以Flask为基础的虾皮Shopee“曲线滑块验证码”识别系统部署 一、验证码类型二、简介三、Flask应用 一、验证码类型 验证码类型&#xff1a;此类验证码存在两个难点&#xff0c;一是有右侧有两个凹槽&#xff0c;二是滑块的运动轨迹不是直线的&#xff0c;而是沿着曲线走的&…

STM32通过HAL库编码方式,在烧写一次程序后,单片机在仿真器上识别不到

在将项目从裸机移植到rtt过程中&#xff0c;总体调试跑不通ADC&#xff0c;进行了单独调试&#xff0c;新程序烧写进单片机后&#xff0c;仿真器再也识别不到单片机。一遍遍检查后发现HAL库没有配置完全。 SYS需要设置成 Serial Wire&#xff0c;忘记设置就成了No Debug,写这么…

基于nodejs+vue的水产品销售管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

如何在 macOS(MacBook Pro、Air 和 iMac)上恢复未保存的 Word 文档

Microsoft Word 在许多用户中很受欢迎&#xff0c;并且有多种用途。无论是为学校写论文、在办公室写报告还是其他许多事情。但是不保存文档并丢失数据可能是您可能面临的最可怕的噩梦。但是&#xff0c;也有几种方法可以在 macOS 上恢复未保存的 Word 文档。 用户在 Windows P…

wpf中如何访问控件和生成使用事件?

实际上对于初次使用wpf的同学来说&#xff0c;尤其是有winform编程经验的童鞋来说&#xff0c;最需要解决的就是快速掌握访问控件的方法以及生成和使用事件。这样才能让页面具有最起码的交互性。下面我们来分别讲述。 文章原出处&#xff1a;https://blog.csdn.net/haigear/ar…

网络原理(4)——网络层(IP)、数据链路层

1. IP 协议 基本概念&#xff1a; 主机&#xff1a;配有 IP 地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;即配有 IP 地址&#xff0c;又能进行路由控制 节点&#xff1a;主机和路由器的统称 IP 协议报头格式 1) 4 位版本&#xff1a;实际上只有两个取值&…

C语言题目之单身狗2

文章目录 一、题目二、思路三、代码实现 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目 二、思路 第一步 在c语言题目之打印单身狗我们已经讲解了在一组数据中出现一个单身狗的情况&#xff0c;而本道题是出现两个单身狗的情况。根据一个数…

9.C++程序中的选择语句

选择语句一共分为两种&#xff1a;条件语句和开关语句 其中条件语句叫if语句&#xff0c;常见的形式为&#xff1a;if ... else ... ; 再复杂一些为if... else if ... else ... ; 开关语句又叫switch语句&#xff0c;类型于开关的使用形式常见的有 switch (var) case : ... b…

tauri中加载本地文件图片或者下载网络文件图片后存储到本地,然后通过前端页面展示

有一个需求是需要将本地上传的文件或者网络下载的文件存储到本地&#xff0c;并展示在前端页面上的。其实如果只是加载本地文件&#xff0c;然后展示还是挺简单的&#xff0c;可以看我的文章&#xff1a;tauri程序加载本地图片或者文件在前端页面展示-CSDN博客 要想实现上述需…

JS 历史简介

目录 1. JS 历史简介 2. JS 技术特征 1. JS 历史简介 举例&#xff1a;在提交用户的注册信息的时候&#xff0c;为避免注册出现错误后重新填写信息&#xff0c;可以在写完一栏信息后进行校验&#xff0c;并提示是否出现错误&#xff0c;这样会大大提高用户提交的成功率&…

gradle镜像配置

当我们在Android Studio中新建项目或者打开已有项目时&#xff0c;会下载gradle文件&#xff0c;当使用官方的下载源时很慢&#xff0c;经常会下载失败&#xff0c;国内我们可以使用腾讯或者阿里的镜像&#xff0c;一般下载速度很快。 一、gradle下载地址 官网地址&#xff1…

C语言指针系列2——加深理解

大家&#xff0c;今天讲的知识点是一块儿一块儿的&#xff0c;所以大家要好好学习喔~ 话不多说&#xff0c;开始正题 关键字&#xff1a;const &#xff08;三种用法&#xff09; 1. int* const p; 2. int const* p; 3. const int* const p; 首先我们要了解一下const&#xff…

【计算机组成原理】实验一:运算器输入锁存器数据写实验

目录 实验要求 实验目的 主要集成电路芯片及其逻辑功能 实验原理 实验内容及步骤 实验内容 思考题 实验要求 利用CP226实验箱上的K16&#xff5e;K23二进制拨动开关作为DBUS数据输入端&#xff0c;其它开关作为控制信号的输入端&#xff0c;将通过K16&#xff5e;K23设定…

【学习笔记】SSL/TLS证书安全机制之证书透明

1、概念 CT - Certificate Transparency&#xff0c;证书透明 2、Trying to Solve 如果意外的 CA 为我们的域名颁发证书&#xff0c;我们是不可见&#xff0c;这就是证书透明&#xff08;CT&#xff09;要解决的问题 3、How CT Works 任何CA机构颁发的所有证书的公共登记处&…

西门子1200PLC模拟量指令读出来的值好像不太对劲的样子

问题&#xff1a;模拟量指令读出来的值好像不太对劲的样子 各位高手看看&#xff0c;是不是哪里错了&#xff0c;传感器4-20ma的规格&#xff0c;我取值0-27648&#xff0c;我要换算成N,后面范围是0-200&#xff0c;但是值为什么都是小数点啊&#xff0c;而且和实际的压力怎么看…

使用宝塔部署项目在win上

项目部署 注意&#xff1a; 前后端部署项目&#xff0c;需要两个域名&#xff08;二级域名&#xff0c;就是主域名结尾的域名&#xff0c;需要在主域名下添加就可以了&#xff09;&#xff0c;前端一个&#xff0c;后端一个 思路&#xff1a;访问域名就会浏览器会加载前端的代…