WEBPACK工程构建

偏执的太偏执、 2022-12-29 01:47 147阅读 0赞

## WEBPACK工程构建 ##

**1.1webpack简介**  
webpack是一种前端资源构建工具，一个静态模块打包器(modulebundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70]**1.2webpack的核心概念**  
**1.2.1 Entry**\*\*  
入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图  
**1.2.2 Outpt**  
输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。  
**1.2.3 Loader**  
Loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)  
**1.2.4 Plugins**  
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。  
**1.2.5 Mode**  
模式(Mode)指示webpack使用相应模式的配置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70]: /images/20221120/20e001253acb406ab60ec882728b6862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwcTEyMDE_size_16_color_FFFFFF_t_70 1]: /images/20221120/c08bcc014c984ccd9eb073a681fedf5b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack入门启动webpack工程

前提：安装完webpack以及webpack-dev-server 参照： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI

墨蓝/ 2023年10月18日 09:39/ 0 赞/ 133 阅读

相关 WEBPACK工程构建

WEBPACK工程构建 1.1webpack简介 webpack是一种前端资源构建工具，一个静态模块打包器(modulebundler)。在webpack看来,前端的

偏执的太偏执、/ 2022年12月29日 01:47/ 0 赞/ 148 阅读

相关 webpack的构建流程

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年10月14日 12:58/ 0 赞/ 210 阅读

相关使用webpack构建前端项目

1. webpack配置文件首先我们需要初始化项目，还有安装相关的webpack套件 > npm init > > npm install webpack --sa

浅浅的花香味﹌/ 2022年07月12日 09:53/ 0 赞/ 372 阅读

相关 React+Webpack构建环境

首先简单介绍一下React和Webpack这两个东东。 React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端

悠悠/ 2022年06月10日 04:17/ 0 赞/ 278 阅读

相关 Makefile构建工程设计——工程构建与编写规则

文件版本说明工程构建 Makefile实现目标最简单的Makefile工程文件 Makefile标签

Bertha 。/ 2022年06月08日 05:59/ 0 赞/ 245 阅读

相关 webpack自动化构建工具

[webpack官网][webpack] 电脑已经安装了git和node 主要四大部分是：入口（entry）输出（output）解析器（loader）

╰半橙微兮°/ 2022年04月03日 10:16/ 0 赞/ 398 阅读

相关 14、webpack生产环境构建

1）代码压缩虽然 [UglifyJSPlugin][] 是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件： [BabelMinif

今天药忘吃喽~/ 2022年01月27日 15:23/ 0 赞/ 333 阅读

相关从 Webpack 到 Ykit —— 前端工程构建实践

在 JavaScript 应用越发多样化和越发复杂的趋势下，也给构建带来了越来越多的挑战。在公司级别的环境下，搭建一个基础环境就要耗费半天，已经输在了起跑线上。我们希望有一个工

约定不等于承诺〃/ 2021年09月15日 08:26/ 0 赞/ 406 阅读

相关 webpack构建与loaders

[http://www.cnblogs.com/yangjunhua/p/5680168.html][http_www.cnblogs.com_yangjunhua_p_56

刺骨的言语ヽ痛彻心扉/ 2021年09月14日 02:08/ 0 赞/ 402 阅读