webpack的使用

原创 已于 2023-12-12 10:54:14 修改 · 631 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

于 2023-12-12 10:53:28 首次发布
本文详细介绍了Webpack中的五个关键概念：入口文件用于打包起点，输出设置打包后的文件路径，加载器处理非原生资源，插件扩展Webpack功能，以及开发和生产两种模式的区别。

一、5 大核心概念

entry（入口）

指示 Webpack 从哪个文件开始打包

output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

plugins（插件）

扩展 Webpack 的功能

mode（模式）

主要由两种模式：

  • 开发模式：development
  • 生产模式：production

菊の物语
关注
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
Hhjian524的博客
10-13 1928
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
webpack使用
sandy_star
08-21 791
一、js文件的打包 1、现在的js文件中使用了模块化的方式进行开发，他们不可以直接使用 因为如果直接在index.html中引入这两个js文件，浏览器并不识别其中的模块化代码 另外，在真实项目中有很多这样的js文件，这样一个个引用的话在后期不方便对他们进行管理 2、使用webpack工具，对多个js文件进行打包 webpack就是一个大包工具，他支持我们代码中写模块化，可以对模块化的代码进行处理 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得很方便了 在控制台输
webpack基础
qq_42048638的博客
03-03 133
webpack
Webpack 使用
Coder Liu的博客
04-18 3090
简介 webpakc的定位实际上是打包器.而不是任务执行器. 当然也可以配合grunt进行使用. webpack也提供了便捷的打包流程,项目构建,插件管理等等. 为了更好的构建项目从开发到生产都一一提供了解决方案. Vue官方也推荐使用的vue-loader也是基于webpack的. 因此这里简单介绍一下webpack的使用一些总结.更详细细致的内容可以到官网进行拓展. 安装 ...
Webpack 使用详解
世间万物皆不如你
06-15 1929
通过本文，你应该已经掌握了 Webpack 的基本使用方法。实际项目中，你可能还需要根据需求进一步配置 Webpack。更多信息和高级配置，请查阅Webpack 官方文档。
webpack使用教程
qq_40096030的博客
03-04 5818
webpack使用教程webpack是什么为什么要使用webpackwebpack的五个核心概念开始使用打包样式资源插件打包图片资源devServer打包优化提取css文件压缩css性能优化优化代码调试 webpack是什么 本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 以上解释截图自官
Webpack使用多环境配置
热门推荐
菜鸟厚非
09-03 1万+
用过 webpack 的小伙伴都知道，在下项目的根目录下放置一个 webpack.config.js 配置文件。无论是使用 webpack 启动项目，还是打包项目，使用的都是 webpack.config.js 这一个配置文件。但是 webpack.config.js 有时会配置一些开发环境的文件，这样配置便于我们调试。如果项目打包为生产环境的发布文件，此时有些配置是开发环境的（为启用压缩、多余的开发环境配置）。
解决webpack使用ip访问
Minyoung 的博客
06-12 4322
设置如下，既可以用ip又可以用localhost访问
Webpack的简单使用
qq_51447436的博客
03-29 5828
Webpack的简单使用
Webpack基础使用
2201_75702085的博客
12-24 1429
Webpack是一个静态模块打包工具。
webpack使用教程（一）
VivianHope的专栏
01-03 3137
这篇博客是自己看了一些别人写的文章或是参考官方文档后整理的。算是笔记类的吧。对于webpack的使用我分成了两个部分来写，在这篇博客中主要是对webpack的基本概念、使用方法进行说明。在下一篇博客我会对在一个项目中具体怎么应用进行说明。webpack简介webpack是一种模块化方案，将JS、CSS和图片等资源都当做模块来处理。提供一个入口文件，它会把该文件以及该文件所依赖的其他模块都打包成一个文
vue项目中webpack使用（terser-webpack-plugin）打包时候去掉console.log与debugger调试
weixin_44979432的博客
06-28 4617
一、配置路径 vue-cli3 在项目目录下的vue.config.js文件里面配置 二、安装插件依赖 yarn add -D terser-webpack-plugin 或 npm install terser-webpack-plugin 三、vue-cli3修改 vue.config.js 文件中进行配置 vue-cli3修改 vue.config.js 文件中进行配置 在文件头部引入 //打包配置自动忽略console.log等 const TerserPlugin = require
webpack使用Vue学习案例
08-25
在"webpack使用Vue学习案例"中，我们将深入理解如何将这两个强大的工具结合，以构建高效的前端项目。 首先，让我们了解Webpack的基础。Webpack 将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS...
webpack:webpack使用说明
05-17
webpack webpack use Instructions 安装: 1.安装node.js在C盘 2.npm install webpack -g 3.npm init一路回车 4. npm i -S -D webpack//安装依赖项 5.根目录下新建以下文件 app main.js work.js public index.html 6....
Vue+Djiango基础用法
weixin_65838109的博客
12-17 176
v-if实现页面元素显示和消失会直接销毁或显现该元素，而v-show实现页面元素的显示和消失会使用display实现，而不会销毁该元素。安装vue所需各种资源node.js、npm/cnpm、webpack、vuecli。创建vue2项目：vue create 项目名。运行vue2项目：npm run serve。运行vue3项目：npm run dev。
2025/12/17总结
lxh0113的博客
12-17 263
webpack 只知道处理 js 文件和 json 文件，所以在处理其他文件时，就需要用到 loader ，loader 可以帮助webpack处理其他类型的文件，因此遇到 jpg 文件时，我们可以在 module 下设置。npx nodejs 的包执行器 无需安装，直接运行，内置与 npm 中，npx 会智能执行流程 执行命令，并且临时安装执行，还可以指定版本执行，直接运行 github 代码 ，交互式命令选择。loader 的执行顺序是，从下到上，从右到左。
2025/12/18 学习总结
最新发布
lxh0113的博客
12-19 326
在 webpack 命令行 环境配置的 --env 参数，可以运行传入任意数量得环境变量，在webpack 中，要使用 env 变量，必须将 module.exports 转换成一个函数 （可以理解为，这样才能把环境变量等参数传递进来）在启动 webpack 时，我们经常可以注意到 有 websocket 字眼，这是因为，webpack-dev-server 会在包中引入一个脚本，此脚本链接到 websocket 这样可以在任何文件修改时，触发重新加载应用程序。而非在配置中指定的原因。
【Webpack 的核心应用场景】
demotang的博客
12-18 358
Webpack 是一个模块打包工具，适用于单页应用、多页应用、静态资源处理等场景。核心功能包括通过 loader 转换非 JS 资源，使用插件优化开发和生产环境，支持微前端架构和 SSR。可通过编写自定义 loader 和 plugin 扩展功能，配合性能调优手段如缓存和多线程构建提升效率。Webpack 提供从基础到高级的完整解决方案，适合各类现代前端项目开发。
Webpack5优化的“双引擎”
AI_5678的博客
12-17 328
本文介绍了Webpack性能优化的核心策略：代码分割和TreeShaking。通过SplitChunksPlugin提取公共代码，动态导入实现按需加载，避免过度分割导致请求过多。TreeShaking依赖ES6模块，需在生产模式下开启，注意处理副作用文件。两者结合可显著减小打包体积，提升加载速度。最后总结了常见优化误区，如正确配置splitChunks.chunks、保留ES模块结构、使用魔法注释命名动态导入文件等。这些方法可有效解决打包体积过大、重复加载等问题，实现更优的前端性能。
Webpack使用
04-02
### 如何使用 Webpack 进行模块打包 Webpack 是一种强大的前端构建工具，能够实现模块化管理和资源优化。以下是关于如何使用 Webpack 完成模块化的打包过程。 #### 初始化项目并安装依赖 为了开始使用 Webpack，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值