【webpack】高级篇

最新推荐文章于 2024-05-16 09:55:01 发布
最新推荐文章于 2024-05-16 09:55:01 发布
阅读量594 收藏 1
点赞数
分类专栏： 【前端工程化】 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44899940/article/details/134859624
版权

webpack高级应用

安装流程

  • npm init -y，自动建立package.json
  • npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
  • npm install babel-loader @babel/core @babel/preset-env -D
  • 新建app.js和webpack.config.js
    在这里插入图片描述
    在这里插入图片描述
  • 运行npx webpack serve
  • 基本环境已搭建
    在这里插入图片描述

提高开发效率与完善团队开发规范

devtool属性
  • 内置属性，一般只要安装webpack-dev-server这个就行
  • 代码行数的锁定，第三个属性不能锁定
  • 开发环境下，推荐使用最后一个
  • 生产环境下，一般不配置
    在这里插入图片描述
devServer属性下
compress属性
  • 设置是不是在服务端进行代码压缩，使传输过程中减少传输大小
    在这里插入图片描述

在这里插入图片描述

port属性
  • 配置端口号 port: 9000
    在这里插入图片描述
headers请求头
  • 配置请求头效果图
headers: {
      'X-Access-Token': 'huasheng',
    },

在这里插入图片描述

proxy开启代理
  • 当你含有对一些特定接口的网络请求，比如客户端地址是在http：//localhost：9000/下
  • 接口来自http：//localhost：3000/
  • 控制台报错跨域
  • 使用devServer的proxy功能
  • 当页面中使用"/api/getname"获取接口内容时候，会将/api替换成后面来请求
 proxy: {
      '/api': 'http://localhost:3000',
    },
https配置
  • 如何在本地将http服务变为https服务
  • 此时本地将不能使用http访问，https才行
    在这里插入图片描述
    在这里插入图片描述
http2配置
  • http2默认自带https自签名证书
historyApiFallback配置

  • 不配置，访问会报404

  • 配置了以后：当访问的是404响应的时候，响应会被替代为index.html
    在这里插入图片描述在这里插入图片描述

  • 如果还报404，可能是资源是相当路径，采取下面方法变绝对路径

 output: {
    publicPath: '/',
  },

在这里插入图片描述

开发服务器主机 host
  • 当你在开发环境中起了devserve服务，并期望同事访问，只需要配置
  host: '0.0.0.0', //目的让同事也能访问你的页面
  • 这样同事就能通过这个访问了
    在这里插入图片描述
模块热替换与热加载
  • 模块热加载
  • 启用webpack 的热模块特性，需要配置devServe.hot参数
 devServer: {
    hot: true, //热替换
}

 devServer: {
    liveReload: true, //热加载，默认开启
}

eslint代码规范

  • 用来扫描我们所写的代码是否符合规范，用于多人协作开发
  • npm i eslint -D
  • npx eslint --init，创建文件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 这样，就会生成一个.eslintrc.json配置文件
    在这里插入图片描述
  • 新建文件，写入代码，运行检查
  • npx eslint ./src，发现有错
  • 第一条，希望我们不要使用console
    在这里插入图片描述
  • 解决
    在这里插入图片描述
  • 如果想要具体看到哪行出现问题，安装插件
    在这里插入图片描述
  • 如果不想使用插件还想实时报错

在这里插入图片描述

取消黑色背景弹窗提示

在这里插入图片描述
在这里插入图片描述

git-hooks与husky

  • 开发者一般不想边写边校验，想在上传代码时进行校验
  • 采取husky来协助进行代码eslint检验

模块和依赖

在这里插入图片描述
在这里插入图片描述

模块解析（resolve）下alias和extensions
  • webpack通过resolve实现了模块之间的依赖和引用
    resolve: {
      //配置解析,为防止写过多的../../
      alias: {
        // '@': path.resolve(__dirname, './src'),
        '@': path.join(__dirname, './src'),
        '@assets': path.join(__dirname, './src/assets'),
      },
      extensions: ['.js', '.json', '.css', '.vue'],
      //模块别名定义，方便后续直接引用别名，当同时出现文件名相同，扩展名不同的时候，优先请求的文件顺序
    },
第三方包起别名externals
  • 类似
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

 //为引用包起别名
    externals: {
      // 全局变量
      jquery: 'jQuery',//它本身还有个$别名
      vue: 'Vue',
      'vue-router': 'VueRouter',
    },
  • externalsType用于指定externals的类型
    在这里插入图片描述
依赖图(dependdency graph)
  • 如何查看项目的依赖关系
  • npm i webpack-bundle-analyzer
    在这里插入图片描述
  • npm webpack serve
    在这里插入图片描述

扩展功能

PostCSS和CSS模块
Postcss模块
  • Postcss模块是一个用JavaScript工具和插件转换css的工具，将最新的css语法转换成大多数游览器能够理解的语法
  • 安装相关插件：npm i autoprefixer -D
  • 新建postcss.config，用来专门配置css的插件
    在这里插入图片描述
  • 还得在这里指定一下游览器的版本
  • 在这里插入图片描述
Css模块
  • Css模块能让你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行
  • 目的，就是当引用的css名相同的时候，他们不会冲突，原因是css名在渲染的时候编译为一串字符，
  • npm i postcss-nested -D

web Works

  • 当我们想在客户端进行大量的运算的时候，又不想阻塞js主线程的运算怎么办？
  • 方法一：异步，但运算量过大还是会造成假死状态
  • 方法二：web Works,html5的新特性，允许我们将复杂的运算放在后台，不会影响js的主线程
  • 如何定义works？在这里插入图片描述
花神yyds
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack高级配置与优化详解
10-15
主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面，webpack跨域问题等相关内容
webpack----详细配置
weixin_45228198的博客
04-22 195
webpack的配置项
在找一份相对完整的Webpack项目配置指南么？这里有
weixin_34357267的博客
11-05 141
  Webpack已经出来很久了，相关的文章也有很多，然而比较完整的例子却不是很多，让很多新手不知如何下脚，下脚了又遍地坑 说实话，官方文档是蛮乱的，而且有些还是错的错的。。很多配置问题只有爬过坑才知道 本文首先介绍Webpack(3)的一些基础知识，然后以一个已经完成的小Demo，逐一介绍如何在项目中进行配置 该Demo主要包含编译Sass/ES6，提取（多个）CSS文件，提取公共文...
前端-前端发展
m0_56770663的博客
10-15 99
我们可以理解为网页上的一个个诸如Div的DOM元素为“View视图”，而改变DOM元素属性或值的数据来源方（如Ajax从服务器获取数据），可以理解为“model数据模型”，而使用诸如Jquery之类的脚本去实现页面动态交互，通过事件机制来响应用户的交互操作（例如用户点击按钮之后弹出一个对话框，或修改了标签中的值），即为control层。客户端在请求时，服务端不做任何处理，直接将前端资源打包后生成的html返回给客户端一个空的静态HTML文件，需要客户端去加载执行js代码才能渲染生成页面内容，
webpack高级篇
接着奏乐接着舞的博客
06-01 2674
高级篇主要讲述：1.提升开发体验 2.提升 webpack 提升打包构建速度 3.减少代码体积 4.优化代码运行性能 这部分的知识很重要，是前端性能优化的重要组成部分，也是面试的高频考点。 注：webpack几乎所有的配置流程都一样，既：去官网（中文翻译网站经常有错误！）先下载包，然后去config里面配置就完事，本文对此稍作演示，其他请自行查阅配置。
webpack高级篇1.1. source-map
weixin_41294419的博客
07-01 193
source-map
webpack高级篇——在webpack中使用.vue文件
小徐的博客
07-17 253
在学习webpack高级篇之前，请先参考 https://blog.csdn.net/csshuaige/article/details/118853538 老一套，先配置再使用。因为.vue文件要依赖于vue-loader，所以要先安装vue-loader 第一步： 在终端中使用命令：npm install vue-loader vue-template-compiler --save-dev安装vue-loader 无报错信息表示安装成功 第二步： 将package.json中vue-loader
Webpack高级应用篇
sourceunity的博客
04-07 837
webpack4之高级篇
setsunadoudou的博客
09-25 111
Tree Shaking css Tree Shaking yarn add purify-css purifycss-webpack -D const glob = require('glob') ...
webpack高级应用篇（十六）：依赖管理
知之为知之，不知为不知
07-28 347
const files = require.context('./modules', false, /\.js$/)
WebPack的高级使用
12-05
WebPack的中级使用，博客地址：http://blog.csdn.net/pcaxb/article/details/53466261
WebPack的高级扩展使用
12-08
WebPack的高级扩展使用 WebPack安装-使用-Loader-配置-插件-环境-排错详解（上） 博客地址：http://blog.csdn.net/pcaxb/article/details/53390151 下载地址：http://download.csdn.net/detail/pcaxb/9696873 ...
详解webpack进阶之loader篇
01-21
webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder 一、loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 ...
Webpack中的高级特性
gogo2027的博客
11-07 182
因为上面的一些优化手段涵盖了webpack5以及webpack5以前的特性，那么在这里提及一下webapck5中开箱即用的特性以及不再维护的老版本的特性吧。持久化缓存，使用cache之后我们便不需要使用dll拆包、了，而且是webpack5中提供的功能。cache : {type : 'filesystem' , // 文件系统 } , }开启多线程打包，上述代码中提到了happypack，不过在webpack5当中，已经不再去维护happypack了，我们就应该使用来加快构建进程。
webpack优化构建速度示例-resolve.extensions:
qq_36413371的博客
05-15 201
当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。
webpack优化构建速度示例-babel-loader开启缓存cacheDirectory:
最新发布
qq_36413371的博客
05-16 192
配置后， 可以看到node_modules/.cache/babel-loader目录下生成了缓存文件，多次打包后，时间从723缩短到了529ms。同时我们还看到webpack输出了cacheable modules 672 bytes， 代表webpack缓存不会受影响。
webpack优化构建速度示例-externals:
qq_36413371的博客
05-15 186
可以看到将jquery排除在打包内，节省了319-177=144ms。这样做的主要目的是为了解决打包文件过大的问题。
webpack优化构建速度示例-合理配置loader的include exclude:
qq_36413371的博客
05-15 263
以便 babel-loader 只处理必要的文件。可以看到配置后节省了1184-814=340ms。
webpack优化构建体积示例-并行压缩：
qq_36413371的博客
05-15 217
这是因为 Webpack 会在构建过程中添加一个额外的步骤：代码压缩。代码压缩是一个资源密集型的任务，它需要分析代码，移除不必要的字符、空格、注释，以及应用各种优化策略来减小最终打包文件的体积。可以看到构建产物减小了 321-316=5kb。
webpack写一篇博客
05-31
好的，下面是一篇关于Webpack的博客： Webpack是一款现代化的前端构建工具，它可以将各种资源（如JavaScript、CSS、图片等）打包成一系列资源文件，使得前端开发变得更简单、更高效。Webpack是一个非常强大的工具，但是它的配置也比较复杂。在本文中，我们将介绍Webpack的基本使用方法和配置。 一、安装Webpack 在使用Webpack之前，我们需要先安装它。可以使用npm或者yarn来安装Webpack，例如： ``` npm install webpack webpack-cli --save-dev ``` 安装完成后，我们就可以开始使用Webpack了。 二、使用Webpack Webpack的使用非常简单，只需要在命令行中输入webpack命令，就可以进行打包。例如： ``` webpack ./src/index.js ./dist/bundle.js ``` 上面的命令将src目录下的index.js文件打包成dist目录下的bundle.js文件。 但是，使用命令行进行打包并不是一个很好的选择，因为我们需要手动输入命令，而且命令的参数也比较复杂。因此，我们可以使用Webpack配置文件来进行打包。 三、Webpack配置文件 Webpack的配置文件是一个JavaScript文件，通常命名为webpack.config.js。在该文件中，我们可以配置入口文件、输出文件、Loaders、Plugins等内容。 1. 入口文件 入口文件是Webpack的入口点，Webpack会根据入口文件进行打包。在配置入口文件时，我们可以使用entry属性来指定入口文件的路径。例如： ``` module.exports = { entry: './src/index.js' } ``` 上面的代码中，我们将入口文件指定为src目录下的index.js文件。 2. 输出文件 输出文件是Webpack打包后生成的文件，我们可以通过output属性来指定输出文件的路径和文件名。例如： ``` const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } } ``` 上面的代码中，我们将输出文件指定为dist目录下的bundle.js文件，使用了path.resolve()方法来获取绝对路径。 3. Loaders Loaders是Webpack中用来处理各种文件类型的模块。在Webpack中，所有的文件都可以看作是模块，而Loaders就是用来处理这些模块的。例如，我们可以使用babel-loader来处理ES6语法，css-loader来处理CSS文件，file-loader来处理图片等。 在配置Loaders时，我们需要使用module属性，并在其中配置rules属性。例如： ``` module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpe?g|gif)$/i, use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/' } }] } ] } } ``` 上面的代码中，我们配置了三个Loaders，分别用来处理JavaScript、CSS和图片文件。其中，babel-loader用来处理ES6语法，css-loader用来处理CSS样式，file-loader用来处理图片。 4. Plugins Plugins是Webpack中用来处理各种任务的插件。在Webpack中，我们可以使用各种各样的插件来扩展Webpack的功能，例如，我们可以使用HtmlWebpackPlugin来生成HTML文件，使用CleanWebpackPlugin来清空打包目录等。 在配置Plugins时，我们需要在plugins属性中指定要使用的插件。例如： ``` const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ // ... ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new CleanWebpackPlugin() ] } ``` 上面的代码中，我们使用了HtmlWebpackPlugin来生成HTML文件，使用CleanWebpackPlugin来清空打包目录。 四、总结 以上就是关于Webpack的介绍，当然，Webpack的配置还有很多细节需要注意，但是上面的内容已经可以让我们基本了解Webpack的使用方法和配置。如果您想要深入了解Webpack，可以查看Webpack的官方文档，里面有更详细的介绍和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值