webpack的使用

最新推荐文章于 2023-10-13 12:11:26 发布
原创 最新推荐文章于 2023-10-13 12:11:26 发布 · 429 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文介绍了 Webpack 的核心功能，作为一个现代 JavaScript 应用程序的静态模块打包器，Webpack 能够递归构建依赖关系图，并将所有相关模块打包成一个或多个 bundle。文中还探讨了 Webpack 与 Express 结合使用的不同方式。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

一，单纯的webpack

https://doc.webpack-china.org/concepts/


二 ，将webpack与express结合

深度结合：将webpack与express结合了。我觉得混在一起了，有点不太好

https://segmentfault.com/a/1190000004505747

工程在一起，分开跑：

https://github.com/dualven/album/tree/master/build



Vue系列之十: webpack使用
林中静月下仙的博客
03-27 1043
10.1、什么是Webpack 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.   Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等
Webpack 速成
weixin_30677073的博客
03-28 187
前言 如果你已经对Webpack精通了或者至少一直在工作中使用它，请关闭当前浏览器标签，无视这篇文章。 这篇文章本意是写给我自己看的，作为一篇Cookbook供快速查询和上手用。原因是虽然工作中会涉及到React开发，但并不是持续性的。可能两个功能的迭代相隔几周甚至一个月。期间则是使用其他的工具或者框架进行开发。而每次捡起来重新开发时或者立新项时，发现已经不太会写webpack配置了，又需要重...
webpack的介绍与使用
感恩、奋进、自信
03-11 1万+
前端打包工具有webpack、grunt、gulp等，这里主要介绍webpack.一、webpack的基本能力：处理依赖、模块化、打包     1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块     2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，配合uglify.js可以减少、优化代码的体积     3...
webpack简单配置及其用法一
感恩、奋进、自信
12-06 796
本文章只是用于记录学习webpack的一些基础知识 webpack版本是4以上版本 一、初识webpack 1、webpack的配置文件名称 默认配置文件名称：webpack.config.js 修改默认配置文件名称：webpack --config 指定名称 2、在项目中安装webpack，并且初始化 1）在项目的根目录下，运行npm init -y，生成package.json文件 2）在项目根目录下，安装webpack webpack-cli：npm i webpack webpa..
webpack -- 简单的使用总结
积少成多
08-13 623
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 这里只是大概的简单的使用总结，要想深入的理解还需自己一点一点的在实际的工作中积累。 webpack是什么 webpack是一个前端构建的打包工具（并不是什么库或框架）， 它能把各种资源，例如JS（含JSX）、coffee、css（含less/sass）、图片等都作为模块来处理和使用。 基础知识点 ...
webpack使用教程
xiao_chun5316的博客
06-03 1049
webpack
webpack使用Vue学习案例
08-25
在"webpack使用Vue学习案例"中，我们将深入理解如何将这两个强大的工具结合，以构建高效的前端项目。 首先，让我们了解Webpack的基础。Webpack 将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS...
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
Hhjian524的博客
10-13 1928
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
webpack使用
sandy_star
08-21 792
一、js文件的打包 1、现在的js文件中使用了模块化的方式进行开发，他们不可以直接使用 因为如果直接在index.html中引入这两个js文件，浏览器并不识别其中的模块化代码 另外，在真实项目中有很多这样的js文件，这样一个个引用的话在后期不方便对他们进行管理 2、使用webpack工具，对多个js文件进行打包 webpack就是一个大包工具，他支持我们代码中写模块化，可以对模块化的代码进行处理 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得很方便了 在控制台输
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....
入门 Webpack，看这篇就够了
weixin_33813128的博客
08-05 1117
2018年8月25日更新，目前 webpack 已经更新值 4.17.1 ，本文所用到的各种库或多或少有些过时，跟着代码操作下来可能会遇到各种问题，不过 webpack 的主体思想没变，所以还是希望本文对新学 webpack 的你，有所帮助。此外用基于 webpack 4.17.1 写了一个简单的demo，如果遇到啥问题，可以参考，之后应...
webpack原理解析（几张图清楚了解其原理）
DLGDark的博客
12-14 1017
webpack是利用什么来打包的？ webpack依赖于node的环境与文件操作系统 webpack的打包过程，其实就是利用node去读取文件，然后进行一些字符串处理后，再利用node去写入文件 webpack打包流程 Loader是如何生效的？ Loader其实是一个方法：接受一个字符串，方法内部处理完后再返回字符串，结构如下图代码所示： // Loader 组织结构 // 下面会将文...
简单地使用webpack进行打包
热门推荐
LPLIFE的博客
07-02 3万+
之前写的有些零散,现在一步步再重新写.一.确保已经安装了nodeJS之后.二. 创建webpack-demo,我的是f盘下的,2.然后进入这个文件夹:3.进行初始化,一路都是选择默认(回车就可以):查看初始化后的文件夹,里面只有一个json文件:4. 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...
【webpack】-- 入门与解析
weixin_33957648的博客
02-20 236
每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。 1.初始化 安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。 npm init -y 这个命令会创建一个默认的package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：...
学习之webpack原理解析与实现一个简单的webpack
那一日面朝大海的博客
04-15 735
一、简介 本文主要讲述的是webpack的工作原理，及其打包流程，一步步分析其打包过程，然后模拟实现一个简单的webpack，主要是为了更深刻地了解其打包流程，为了充分体现其山寨的意义，故名称定为web-pack。 二、webpack的一些特点 webpack的配置文件是一个.js文件，其采用的是node语法，主要是导出一个配置对象，并且其采用commonjs2规范进行导出，即以module.exports={}的方式导出配置对象，之所以采用这种方式是为了方便解析配置文件对象，webpack会找到配置
npm ERR! code EINTEGRITY 解决方案
dualvencsdn的博客
01-16 1万+
Error: sha1-HsihLT8VutOkAReGpzpIZJY2twQ= integrity checksum failed when using sha1: wanted sha1-HsihLT8VutOkAReGpzpIZJY2twQ= but got sha512-JxqSv200Y6zDh2s35x8v4GOH4L40O0BcwZAjoN1nG8LwD1dVlNPmyL54FxKj...
如何使用proxyTable
dualvencsdn的博客
03-19 5910
1)为何要使用proxyTable 在VUE的这种项目里，一般前端用webpack进行开发与打包； 后端使用express ,koa等框架。 不管前端的代码是否与后端代码，物理上是否是同一个工程，不能逃避的是，前端在开发的时候，要调用后端的接口。 但开发与生产调用的后端地址不同： 开发时，是分别启动的服务与端口；生产状态时，前端的代码已经打包放在服务端的工程里一起发布，作为同一个工程的...
node版本与编译问题
dualvencsdn的博客
11-17 5567
在node 10版本的时候，是对python 没有要求的，升级到高版本后，会对python可执行文件有要求会对msvsVersion有要求总之各种校验而node node-sass之间的版本 也有关系，而如果工程比较老的话，node如果升上来了而工程里的 node-sass如下。如果冒然把node-sass升上来，可能对工程里的源文件有影响。所以保持工程对应的node环境很重要。
dataTable ajax.reload() 报错而引起的思考
dualvencsdn的博客
12-27 4706
因为想要使用 ajax.reload() 报错而引起的思考。 经过下面的解释，结论是，还是用新的构造方法，但想使用就的api,就dataTable.api().row(0).remove();类似这样的使用。 jQuery dataTable的初始化有两种方式： [html] view plain copy var dataTab
Webpack使用
最新发布
04-02
### 如何使用 Webpack 进行模块打包 Webpack 是一种强大的前端构建工具，能够实现模块化管理和资源优化。以下是关于如何使用 Webpack 完成模块化的打包过程。 #### 初始化项目并安装依赖 为了开始使用 Webpack，首先需要创建一个新的 Node.js 项目，并初始化 `package.json` 文件来管理项目的依赖项。这可以通过运行以下命令完成： ```bash npm init --yes ``` 随后，安装 Webpack 及其 CLI 工具作为开发依赖： ```bash npm i webpack webpack-cli --save-dev ``` 以上步骤确保了项目具备必要的基础配置和工具链[^1][^2]。 #### 配置 Webpack Webpack 的工作流程通常基于一个名为 `webpack.config.js` 的文件。该文件定义了入口、出口以及其他选项。下面是一个简单的配置示例： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件路径 output: { filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist') // 输出目录 }, mode: 'development' // 构建模式：可选 development 或 production }; ``` 此配置指定了应用的入口点 (`entry`) 和最终打包后的输出位置 (`output`)。此外还设置了构建模式为开发环境(`mode: 'development'`)，以便调试更容易[^3]。 #### 执行打包 当一切准备就绪后，可以在终端中执行以下命令来进行实际的打包操作： ```bash npx webpack ``` 这条指令会读取当前目录下的默认配置文件 `webpack.config.js` 并按照其中设定的方式处理源码，最后生成目标文件到指定的位置[^4]。 #### 性能优化与高级功能 除了基本的功能外，Webpack 提供了许多额外特性用于提升性能和增强灵活性，比如代码分割(Code Splitting)，动态加载(Dynamic Imports)等策略可以帮助进一步改善用户体验。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dualven_in_csdn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值