webpack的基本使用

最新推荐文章于 2025-04-22 17:35:16 发布
最新推荐文章于 2025-04-22 17:35:16 发布
阅读量250 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51345651/article/details/129438307
版权
文章介绍了webpack作为前端资源构建工具和模块打包器的角色，详细阐述了其五个核心概念：Entry、Output、Loader、Plugins和mode，并分别解释了development和production模式的区别。此外，还提及了webpack的一些基本命令。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近又重新复习整理了一些关于webpack的基本使用，和大家分享一下

一、webpack简介

webpack是前端资源构建工具+静态模块打包器。
前端资源构建工具：就是把一些浏览器不支持的文件比如less，sass，转换成浏览器支持的css这样的工具。
静态模块打包器： 前端的所有资源文件(js/json/css/img/less/…)都会被webpack作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

二、webpack五个核心概念

2.1 Entry

指定 webpack 打包的入口

2.2 Output

指定 webpack 打包资源的存放位置

2.3 Loader

让 webpack 能够处理非 JavaScript 文件 (webpack 自身只能处理JavaScript)

2.4 Plugins

可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

2.5 mode

指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数，达到优化的效果。

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。

production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

production打包后，代码会进行压缩，比development的文件小。

三、webpack的基本使用

这是我搜集到的一些webpack的一些基本命令，后续有时间会详细更新具体内容

 

webpack基本使用01--webpack入门学习
g841805的博客
06-18 573
Webpack 本身功能是有限的:仅能编译JS 中的 ES Module 语法能编译JS 中的 ES Module 语法，还能压缩JS 代码。
Node-webpack基本使用和详细案例
crystal_iwwish的博客
11-17 863
webpack基本概念 webpack ：是前端项目工程化的具体解决方案。目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。 webpack基本使用 ① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json ② 新建 src 源代码目录和 public 静态资源目录 ③ 新建 public -> index.html 首页和 src -> index.js 脚本文件 ④ 初始化首页基本的结构 ⑤ 运行 n
webpack最基本的用法
Mr.Yuan
03-24 594
webpack安装webpack是所以Node.js开发的工具,可通过npm安装,首先要保证node已经安装完毕,可以去node官网下载, 然后通过npm下载webpacknpm install webpack -g我们只需要webpack构建项目, 项目上线后是不需要依赖webpack的 所以我们在项目文件夹下安装时候可以安装在dev-dependencies中, 即:npm install we
Webpack的基本使用
道阻且长，行则将至。
10-19 4538
Webpack的基本使用 一、什么是Webpack Webpack是一个静态的模块打包工具,当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件 webpack提供了友好的模块化支持以及代码压缩混淆、处理JS兼容问题、性能优化等强大的功能，提高开发效率和项目的可维护性 静态：开发的过程中，存在于本地的js/css/图片图标字体文件等，就是静态的 动态的内容，webpack没办法处理只能处理静态的 二、Webpack安装 首先初始化项目 npm init -y 全局安装webpack np
webpack基础使用了解（入口、出口、插件、加载器、优化、别名、打包模式、环境变量、代码分割等）
最新发布
weixin_41549971的博客
04-22 1222
webpack基础使用了解（入口、出口、插件、加载器、优化、别名、打包模式、环境变量、代码分割等）
webpack的使用
soephin的博客
02-21 331
1.基本概念 webpack是一个js应用程序静态模拟打包器 可以处理静态文件，把很多文件打包整合到一起, 缩小项目体积, 提高加载速度 2.使用步骤 初始化包环境 yarn init 安装依赖包 yarn add webpack webpack-cli -D 配置scripts(自定义命令) scripts: { "build": "webpack" } 新建目录src 新建src/add/add.js - 定义求和函数导出
webpack使用
以爱护甲,爱满枫林。
09-26 1555
本次使用webpack4进行构建打包。
**webpack 基本使用**
08-20
### webpack 基本使用 **webpack** 是一个流行的 JavaScript 模块打包工具，它可以将项目的各种静态资源（包括但不限于 JavaScript、CSS、图片文件等）按照一定的规则进行整合与优化，最终生成可以在浏览器环境中...
Webpack:webpack的基本使用，版本是个坑
05-12
在webpack中使用 -S-D 有时会失效，建议使用--save-dev loader 注意loaders的处理顺序是从右到左 // 处理loader module: { loaders: [ { test: /\.css$/, // 注意loader loader: 'style-loader!css-loader', ...
vue实战--webpack基本使用
忘掉地平线
12-10 4173
安装webpack 全局安装：npm i -g webpack 目的：在任何目录中通过CLI使用 webpack 这个命令 项目安装：npm i -D webpack目的：执行当前项目的构建安装失败：目录下存在一个以前的jQuery包 安装成功使用实例思路 1 使用npm init -y 初始package.json，使用npm来管理项目中的包 2 新建 项目目录结构及index.html和m
webpack基本使用
qq_40358970的博客
05-19 400
webpack从入门到精通第一章：webpack简介1.1 webpack是什么1.2 webpack五大概念1.2.1 entry:1.2.2 Output:1.2.3 Loader: 第一章：webpack简介 1.1 webpack是什么 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模
使用webpack
章柏华的博客
02-25 249
首先文件夹vue-loader-demo |-main.js       入口文件 |-App.vue       vue文件 |-package.json  工程文件(项目依赖、名称配置) npm init --yes 生成 |-webpack.config.js   webpack配置文件  -------------------------------------
webpack使用教程
qq_40096030的博客
03-04 5734
webpack使用教程webpack是什么为什么要使用webpackwebpack的五个核心概念开始使用打包样式资源插件打包图片资源devServer打包优化提取css文件压缩css性能优化优化代码调试 webpack是什么 本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 以上解释截图自官
webpack 使用教程
weixin_54255895的博客
03-11 1364
一、创建文件并初始化webpackwebpack下载后，为什么还要安装webpack-cli呢？因为webpack-cli是执行webpack的一个工具，已经从webpack4以后剥离，所以...在磁盘或者文件cmd 运行以下命令这个时候，项目文件夹会多出一个package.json文件，可以用npm或者yarn安装webpack 和 webpack-cli；
【webpack】webpack的基本使用
weixin_43655896的博客
02-13 7847
整理了一些webpack4基本的使用
webpack基础用法
qq_42550235的博客
11-23 294
一、webpack概述 webpack是前端项目构建工具(打包工具),可以解决当前web开发中面临的困境。 作用： 友好的模块化支持、代码压缩混淆、处理js兼容问题、性能优化。 webpack基本使用 1、安装webpack npm install webpack webpack-cli -D 2、在 webpack.config.js的webpack 配置文件 3、在webpack的配置文件中，初始化如下配置： module.exports = { // mode指定构建模式（development/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值