webpack之开发常见配置及应用

最新推荐文章于 2024-09-16 18:00:00 发布

MoYoon

最新推荐文章于 2024-09-16 18:00:00 发布

阅读量123

点赞数

分类专栏： webpack 文章标签： webpack 实际项目配置

本文链接：https://blog.csdn.net/qq_29510269/article/details/89921759

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack之开发常见配置及应用

一、require.context
二、postcss
三、gitHooks

一、require.context

二、postcss

三、gitHooks

//package.json文件
{
"gitHooks":{
	"pre-commit":"lint-staged"
},
"lint-staged":{
	"*.js":[
		"vue-cli-service lint",
		"git add"
	],
	"*.vue":[
		"vue-cli-service lint",
		"git add"
	]
}
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MoYoon

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

webpack vue项目开发环境局域网访问方法

08-27

在开发Web应用时，特别是在使用现代前端框架如Vue.js时，构建工具Webpack是不可或缺的一部分。Webpack帮助我们将项目中的各种资源（如JavaScript、CSS、图片等）进行打包和优化，以便在浏览器中高效运行。然而，当...

前端路由&webpack基础配置详解

10-16

在现代前端开发中，路由管理和构建工具配置是两个不可或缺的核心话题。本文将深入探讨前端路由的工作原理，以及如何使用webpack进行基础配置。...希望本文能帮助读者更好地理解前端路由及webpack配置的实际应用。

参与评论您还未登录，请先登录后发表或查看评论

基于webpack的PC端和mobile端开发以及生产环境的搭建

weixin_34355715的博客

12-11

774

我们用webpack做单页面应用开发应该尝试过很多次了，如果在同一个项目需要支持PC端和移动端，做成多页面应用，开发时能根据请求的终端返回不同的内容，应该怎么做呢？以下描述的是我尝试的一种方案，并且以vue-cli 2.x提供的模板为例，访问 Github 可查看本项目源码。目录架构因为是PC端和移动端两个模块，所以我们可以在src下拆分为pc和mobile两个目录，分别放两端的代码，再有一个...

盘点Webpack常见使用配置

你怎么也喜欢嘴巴嘟嘟

06-11

4078

随着前端开发越来越复杂，那么我们需要做的功能也不止基本界面了，比如开发过程中我们需要通过模块化的方式来开发；比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；等等…. 即使我们使用三大框架或者借助于脚手架cli 事实上Vue-CLI、cre

webpack常用配置

Follow_the_heart的博客

01-23

1847

webpack常规说明

webpack开发服务器配置

weixin_57677300的博客

05-15

736

比如在index.html中，我们需要依赖一个 abc.js 文件，这个文件我们存放在 public文件中；在index.html中，我们应该如何去引入这个文件呢？✓ 比如代码是这样的：< script src="./public/abc.js">；但是这样打包后浏览器是无法通过相对路径去找到这个文件夹的；会报错解决：所以代码是这样的：< script src="./abc.js">< /script>;设置static即可；

webpack基础配置（多页面应用）

qq_41831968的博客

12-05

2084

webpack基础配置第一次自己从头些webpack的配置，记录下使用过的配置的作用和遇到的问题。因为是按照自己多页面应用的配置来说的，所以和vue、react的配置有些不同，如果有错误，欢迎大家指出 entry webpack打包的入口，webpack执行构建的第一步是从入口开始，查找并递归解析出所有入口依赖的模块（js/hmtl/css等文件）这里配置是必须的，没有填写会报错；可以配置...

webpack之常见性能优化

weixin_45320557的博客

08-16

4966

关于webpack的性能优化，主要体现在三个方面：构建性能：是指在开发阶段的构建性能。当构建性能越高，开发效率越高。传输性能：在这方面重点考虑网络中的总传输量、JS文件数量以及浏览器缓存。运行性能：主要是指JS代码在浏览器端运行的速度。构建性能减少模块解析模块解析包括：AST抽象语法树分析、依赖分析、模板语法替换对某个模块不进行解析，可以缩短构建时间如果某个模块不做解析，该模块经过loader处理侯的代码就是最终代码。如果没有loader对该模块进行处理，该模块的源码就是最终打包结果...

Webpack配置

nanxun201314的博客

03-15

2851

Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

webpack 的基本使用及配置

两个月亮

01-12

768

html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为。在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。

webpack配置项

Wxy099015的博客

04-28

293

配置模块处理规则，例如使用不同的 loader 处理不同类型的文件（例如，Babel 处理 JavaScript，CSS loader 处理 CSS）。这些只是 Webpack 配置中的一部分常见选项，实际上，Webpack 还提供了许多其他配置选项，可以根据项目需求进行定制。: 配置 Webpack 如何解析模块路径，包括指定模块的别名、自动解析文件后缀等。: 配置外部依赖，告诉 Webpack 某些模块是外部引入的，不需要打包。: 指定打包后的输出配置，包括输出文件的路径、文件名等。

用webpack同时开发PC站、手机网站的webpack配置.zip

12-24

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它在开发中起着至关重要的作用，能够将各种资源如JavaScript、CSS、图片等模块化并进行优化，使其成为适合浏览器加载的形式。在这个"用webpack同时开发...

webpack常用配置总览(小结)

10-15

使用entry时，有几种常见的配置方式： - 单入口配置： ```javascript entry: './app/entry.js' ``` 表示只有一个入口文件。 - 多入口配置： ```javascript entry: ['./app/entry1.js', './app/entry2.js'] ...

解决 webpack 配置 sass-loader后报错，无法正常build

Dou_Hua6的博客

09-12

758

sass-resources-loader 主要用于将 Sass 变量、混入（mixin）和函数等工具类样式注入到每个 scss 文件的作用域中。这意味着 sass-resources-loader 不会将实际的样式插入到每个 scss 文件中，而是仅仅将变量和混入等工具类代码注入。如果你在全局引入的 scss 文件中包含普通的 CSS 样式（如选择器和样式定义），这些样式会被反复注入到每个 scss 文件中，导致不必要的重复和冲突。变量、混入和函数等工具类样式。

【webpack4系列】webpack基础用法（二）

mengran_code的博客

09-15

1154

我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

Webpack和Vite的区别

qq_45464944的博客

09-12

1293

什么是Webpack？什么是Vite？webpack和Vite的区别是什么？

【Webpack--007】处理其他资源--视频音频