webpack（三）：webpack起步

最新推荐文章于 2022-04-23 11:44:53 发布
最新推荐文章于 2022-04-23 11:44:53 发布
阅读量237 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangdongm123/article/details/104004028
版权

创建如下文件和文件夹：
在这里插入图片描述
dist文件夹：用于存放之后打包的文件
src文件：用于存放我们写的源文件
3.1commonJS模块化导出
3.2commonJS模块化导入
3.3js文件的打包
3.4使用打包后的文件
3.5ES6模块化的导出
3.6ES6模块化的导入
3.7重新打包

3.1commonJS模块化导出

这是基于nodejs使用的导出方式，没有nodejs的支撑是无法使用的！
module.exports= {} 导出
在这里插入图片描述

3.2commonJS模块化导入

require导入
在这里插入图片描述

3.3js文件的打包

  现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？
  不可以。因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
  我们应该怎么做呢？
  使用webpack工具，对多个js文件进行打包。我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。
首先，切换到项目的路径下
在这里插入图片描述
使用如下webpack的打包指令：将main.js(包含文件中导入的其他依赖文件，如下图所示）打包成bundle.js
在这里插入图片描述
webpack src/main.js dist/bundle.js
在这里插入图片描述
如图所示，打包成功
在这里插入图片描述

3.4使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件，bundle.js文件，是webpack处理了项目之间文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可。
在这里插入图片描述
打开网页，查看效果：
在这里插入图片描述

3.5ES6模块化的导出

在这里插入图片描述

3.6ES6模块化的导入

在这里插入图片描述

3.7重新打包

修改了文件就要重新打包使其生效
在这里插入图片描述
刷新网页，查看效果：
在这里插入图片描述
参考文档

wangdongm123
关注
专栏目录
webpack起步 - 打包JS文件
YinXiaobo
12-03 521
webpack起步 - 打包JS文件 1. 使用 NPM 安装 webpack 要安装最新版本或者特定版本，请运行一下命令： npm install webpack --save-dev npm install webpack@<version> --save-dev 2. 在目录下新建 app.js 作为入口文件，新建 sum.js ，index.html app.js :...
自定义 webpack 配置1：基础配置
ZWQ0325的博客
09-04 448
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置 1.初始化 yarn init 初始化成功 yarn init v1.17.3 question name (my-webpack-config): question version (1.0.0): question description: question entry point (index.js): question repository url (https.
webpack 起步
马金波
08-28 253
概念 官方解释： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 自我理解： webpack 用于管理资源（css，js，图标，字体等），解决依赖...
webpack起步
Sun~Neo
04-17 199
1、webpack安装 1.1、安装最新NodeJS 1.2、创建webpack-demo目录(cmd操作) mkdir webpack-demo cd webpack-demo 1.3、初始化 package.json npm init -y 1.4、安装 webpack 和 webpack-cli npm install webpack webpack-cli --sa...
Webpack2 起步
Riptide
04-05 703
Webpack2 起步 最初翻译于2017年1月初，后来觉得翻译的不好就删掉了...现在恢复~ 说不定对别人有帮助 What is webpack 简而言之，webpack是一个JavaScript模块打包工具。但是它可以用来托管并且管理你所有的前端代码（至少它被开发出来的目的或者说社区希望达到的目标是这样的） 传统的构建工具执行任务的方式是： 你的cs
react-webpack-babel：简单的React Webpack Babel入门套件
02-06
这只是为了让您起步，而其余的则取决于您。 我们的目标是使事情保持简单，并让您可以自由选择要添加的框架。 演示版 先决条件 您需要在系统中安装和 。 跑步 分叉并克隆项目： git clone ...
程序员面试刷题的书哪个好-learn-webpack:学习webpack
07-07
Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。 # 初始化项目 npm init -y 本地安装 最新的webpack版本是： 要安装最新版本或特定版本，请...
boilerplate-es6-webpack:用于启动 Gulp + Webpack + 6to5 (ES6) JavaScript 项目的简单样板
06-27
本项目"boilerplate-es6-webpack"是一个针对JavaScript开发者的起步模板，它集成了Gulp、Webpack和6to5（现更名为Babel）等现代前端开发工具，旨在帮助开发者快速搭建支持ES6语法特性的应用。下面将详细阐述这个项目...
webpack-bundle-delta:尽早了解您的webpack v4捆绑包
05-02
注意：该工具仍处于起步阶段，我们欢迎您对其进行改进而做出的。 用法 通过yarn或npm安装yarn add @trainline/webpack-bundle-delta --dev # or npm i -D @trainline/webpack-bundle-delta [可选]根据需要webpack-...
webpack-起步
yuxiaoc的博客
11-04 246
这个系列将记录webpack5 的学习。 常规目录结构： webpack-demo |- package.json |- webpack.config.js |- /dist |- index.html |- /src |- index.js 作用：静态打包工具，编译javascript 等 安装： npm init npm install webpack webpack-cli -D 新建webpack.config.js const path = re
webpack 简单构建起步
zhiying_08的博客
05-05 209
前提：确保node.js存在且是最新版本第一步：创建一个空文件mkdir webpack && cd webpack第二步：初始化npm  npm init第三步：本地安装webpack 和webpack-clinpm install webpack --save-dev npm webpack-cli --save-dev第四步：创建目录结构和文件内容dist/index.htm...
2、webpack 起步
gosenkle的专栏
05-21 215
1、创建目录初始化npm，并安装webpack和webpack-cli mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 2、工程目录更如下 webpack-demo |- webpack.config.js // webpack配置...
简单易懂的webpack入门
秋扬诺布的笔记本
03-30 1833
简单易懂的webpack入门本文比较初级且详细易懂适合没怎么接触过Webpack，而又对webpack感兴趣的人参考； 最近这些天有几个朋友在刚开始使用webpack中遇到问题，所以想写一篇自己的立即，因为水平有限但是尽力让本文一目了然；nodejs与npmwebpack webpack安装 webpack打包 loader——模块加载器 webpack配置说明 webpack.config.js
webpack学习从基础学起
kokunka的博客
04-23 1979
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack新手教程2021
AhCola
04-19 384
webpack快速入门2021 本篇文章转自：我的个人网站。 本篇教程适用于webpack初学者。这个也是我自己学习webpack时，整理的一些笔记，适用于新手。 本教程源码地址：https://github.com/pengfeiw/webpack-tutorial 可以打开编辑器，跟着我的步骤，一步步向下学习。 一.什么是webpack 作为一个javascript前端开发者，肯定都知道webpack这个东西，也知道各种各样的module。webpack作为一个打包工具，就是将各种各样的模块捆绑（打包）
webpack官网demo起步中遇到的问题
weixin_30815427的博客
08-15 74
在webpack官网demo一开始搭建中 转载于:https://www.cnblogs.com/ryans/p/7367431.html
vue项目，webpack中配置src路径别名及使用
YUSIR 完美CODING世界
04-21 6552
默认会有‘@’别名，指向src目录，还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况：在js中用，在css中用，在html文档内用 js中用，最简单: import {getName} from '@/util/name' css中使用，需要加入“~”，并且不要写成字符串： { background: url(~@/assets/img/04_2.jpg); bac...
webpack入门：从拆分到压缩
1. **模块化**：webpack允许开发者将代码划分为独立的模块，每个模块都可以通过`import`或`require`语句引用。这使得代码组织更加清晰，易于维护。 2. **入口（Entry）**：webpack构建的起点，可以是一个文件或多个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值