webpack介绍

最新推荐文章于 2023-11-06 20:29:41 发布
最新推荐文章于 2023-11-06 20:29:41 发布
阅读量780 收藏
点赞数
分类专栏： 模块化处理工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxf_ming/article/details/60867428
版权

1.1 webpack是什么？

 commonJs和AMD是用于JavaScript模块管理的两大规范，commonJS规范定义模块的同步加载，AMD定义模块异步加载，commonJS用于nodeJS，AMD通过requirejs等工具适用于前端。
webpack是一个项目构建工具（module bundler），具有打包，压缩，合并文件等功能。（gulp也具有压缩代码，合并代码，移动文件等功能）可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有强大的js模块化的功能，
webpack对他们进行统一的管理以及打包发布。webpack只用在react。vue中 ，angular也可以，但是不推荐


1.2npm是什么？

npm是主流的javascript组件发布平台，许多前端项目都会依赖npm上的项目，也会发布到npm平台之上。

1.3模块是什么？

web开发中常用到的静态资源有JavaScript ，css，图片，html等文件，webpack中将静态资源文件成为模块

1.4官方文档

官网：http://webpack.github.io/docs/  先过这三个文档文档

Webpack-handlebook: http://zhaoda.net/webpack-handbook/

Gitbook: http://fakefish.github.io/react-webpack-cookbook/index.html

Github上的几十个example看一遍

参考网站：

https://segmentfault.com/a/1190000003970448

https://github.com/ruanyf/webpack-demos

https://segmentfault.com/a/1190000002551952

http://blog.csdn.net/yczz/article/details/49250623

https://github.com/petehunt/webpack-howto#8-optimizing-common-code

https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651220238&idx=1&sn=ebdba528f199e10f6b273c3a6fd04650&scene=0&key=b28b03434249256b7847bfdf62609ae5dc60fe6644c4c53f8f8e392425069ed2d9fa147c8c66f9d719456241c3a687ba&ascene=14&uin=MjYzMjMwMzE4MA%3D%3D&devicetype=android-21&version=26031031&nettype=WIFI&pass_ticket=3wAH%2BijJnBbvbS8rfC%2FF5Sv78DZDco29Ejqjt96dzxTLB72USiOBN69mnq9DFTFy


1.5使用webpack的好处

1.对commonJS，AMD，ES6语法进行了兼容
2.对js、css、图片等资源文件都支持了打包
3.有独立的配置文件webpack.config.js
4.可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
5.webpack使用异步io并具有多级缓存，使得webpack很快且在编译上更快。

1.6gulp到webpack的原因

gulp在项目可以压缩代码，合并代码，移动文件等操作，但也有一些缺点，于是出现了webpack，性能要比gulp好，是专门处理SPA应用的，gulp是处理一般的网站的构建的。

1.7webpack中的功能块

1.插件plugins
2.加载器loading
3.代码分离code spliting
4.开发工具 development tools
5.优化 optimization
5.

gxf_style
关注
专栏目录
Vue webpack介绍与安装
yexiangCSDN的专栏
05-28 174
一、模块化相关规范 1. 模块化概述 传统开发模式的主要问题 ① 命名冲突 ② 文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器端模块化规范 AMDRequire.js (http://www.requirejs.cn/) （过时） CMDSea.js (https:/...
webpack基本介绍
Celester_best的博客
12-11 395
Webpack是什么 Webpack是一种前端资源构建工具，是一个静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 解释： Webpack会以入口文件为起点，将所有的依赖都记录好，形成一个依赖关系树状结构图。 接着把所有的依赖代码都引进来形成一个chunk（翻译过来就叫代码块）， 再将这些代码都编译成浏览器能够识别
Webpack 介绍
m0_48982503的博客
12-08 562
webpack是一种前端资源构建工具。一个模块打包器，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，TypeScript等），并将其打包为合适的格式以供浏览器使用）,3，webpack 工作方式 把项目当做一个整体，通过一个给定的入口文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。 ...
webpack得介绍
Primise7的博客
12-22 209
Webpack的介绍 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 CMD 模块、ES6 模块、CSS、图片、 JSON、Coffeescri...
（1）webpack介绍
Java田根旺
01-22 2544
一、webpack简介 webpack=Web Package，webpack是一个现代JS应用程序的静态模块打包器（module bundler） 模块（模块化开发，可以提高开发效率，避免重复造轮子） 打包（将各个模块，按照一定的规则组装起来） 官网：http://webpack.js.org/ 特点：1.功能强大（打包、构建、发布Web服务）2.学习成本高 我们之前学习过一个自动化构建工具，叫Gulp，但是现在企业不在适用，因为由于webpack越来越强大，将Gulp已经淘汰掉了。 二、如
详解webpack介绍&安装&常用命令
12-09
Webpack 是一个强大的前端模块打包工具，它通过静态分析模块间的依赖关系，将多个模块整合成一个或多个静态资源。Webpack 的出现解决了传统模块加载工具在处理复杂项目时的不足，尤其是对于大型应用，无论是单页面...
WebPack:模块化打包工具 WebPack 介绍，详情请看 readme
05-13
WebPack 模块化打包工具 WebPack 的作用是将你的项目当做一个整体，通过分析项目的结构，找到项目中所有依赖的 JavaScript 模块，以及其它的一些浏览器不能直接运行的拓展语言，如 Scss, TypeScript 等，并将其转换...
(一)Webpack介绍小白入门四种打包方式
Bioye_的博客
06-09 1158
Webpack 第 1 章：webpack 简介 1.1webpack是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在weboack看来前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理. 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 Entry 入口(Entry)指示 webpack 以哪个文件为入口起点开始打 包，分析构建内部依赖
Webpack介绍
汉堡请不要欺负面条
09-05 580
1、什么是Webpack       webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但这不用我们理会，因为 webpack 有着各种健全的加载器（loader）在处理这些事情。
一：webpack 介绍
weixin_30394981的博客
08-22 88
webpack介绍： 它是一个给JS准备的打包工具，它可以把很多的模块打包成很少的静态文件，webpack有一个自己的特性就是代码分割（Code Splitting）可以使项目只加载当时需要的文件，模块可以通过loaders处理各种各样的文件模块中JS无论是用CommonJs, AMD, ES6等方式写的，都可以进行处理甚至还可以处理CSS/image/json….等文件或者自己定义的文...
Webpack 的简单介绍
weixin_34161032的博客
01-30 167
本文介绍了一些 webpack 的核心概念以及一些概念术语，并对核心配置做了一些简单的用法讲解。建议刚刚接触 Webpack 的朋友可以先了解一下。想了解更多 Webpack 使用以及配置的话可以参考我的下一篇文章： 从零开始搭建一个 Webpack 开发环境配置（附 Demo） 为什么需要使用 webpack 模块化开发的趋势 我们在开发的过程中，之前都是使用引入 script 的方式进行...
Webpack介绍大全
最新发布
qq_46372132的博客
11-06 1084
Webpack介绍以及配置大全
一.webpack的基本介绍
小毛驴的博客
10-20 390
一． Webapck的基本介绍 官网地址http://webpack.github.io/docs/ 1.1.大致的打包过程 通过官网的 ‘what is Webpack’我们可以看到它将文件看作是一个个的模块，他们直接的箭头可以看成他们之间的依赖关系。 这样相互依赖的模块群通过webpack的打包处理将它们打包成浏览器可以直接运行额js，css或者png文件 ...
webpack的介绍与使用
jwz934738949的博客
07-19 181
webpack介绍 webpack是将javascript文件的静态模块打包工具。使用webpack可以让我们进行模块化开发 webpack可以打包javascript文件、css文件、图片、json文件等 webpack的安装 使用webpack必须安装node环境，前往node.js官网（https://nodejs.org/en/），下载LST版本; 下载webpack 3.6.0版本。进入cmd命令行模式，输入命令npm install webpack@3.6.0 -g; 安装完毕后输入命令：
想聊聊 webpack, 如何来配置 webpack 以及基本使用
web00_11的博客
08-15 872
webpack 的基本使用 什么是 webpack 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。 在项目中安装 webpack 在终端运行如下的命令，安装 webpack 相关的两个
webpack的好处
weixin_38098192的博客
07-13 5717
1.轻松使用es6。   因为webpack可以在浏览器不支持es6的情况下让你使用es6语法，最新的webpack版本已经不需要配置也能过变异es6语法，之前的版本都需要加入babel加载器才可以打包es6.2.可以打包文件3.代码改变后，可是在浏览器上没有显示出改变后的效果。4.减少界面请求数量。  许多图片图表都是放到一张图片上的，这样做的原因是因为能过减少图片体积，同样的将js，css文件...
Webpack简介与基本概念
xiangzhihong8的专栏
05-23 3185
Webpack简介 Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打...
介绍webpack打包
05-04
Webpack是一个现代化的前端打包工具，它的主要目的是将各种前端资源打包成一个或多个静态文件，以便于在浏览器中进行加载。Webpack可以将JavaScript、CSS、图片等多种类型的文件进行打包，而且可以通过插件机制来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值