Webpack：Webpack入门

最新推荐文章于 2024-08-11 20:55:15 发布
最新推荐文章于 2024-08-11 20:55:15 发布
阅读量224 收藏 2
点赞数
分类专栏： Webpack 文章标签： webpack webpack4 webpack打包 webpack基本配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41350225/article/details/89341187
版权

Webpack入门

Webpack是什么

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)

在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle

参考链接： 依赖图链接 官方网站

Webpack做什么

在这里插入图片描述
注意：webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack 的 loader 系统(后边会介绍)中使用了一个 Babel或者类似功能的转译器(将高版本js语法转为低版本语法)

Webpack的安装【全局与本地】

①安装命令

cnpm i webpack-cli -g	//webpack-cli表示webpack命令行工具
cnpm i webpack -g  //-g表示安装在全局
或者
cnpm i webpack-cli webpack  -g

在这里插入图片描述

②检测全局安装是否成功

webpack -v 或 webpack --version 	//查看版本

在这里插入图片描述

本地安装webpack

①创建本地项目目录

可以手动创建也可以用命令行创建，这里我直接在桌面下手动创建一个webpack的文件夹

②创建package.json文件

npm init --yes 或者 npm init -y  //y是yes的缩写

在这里插入图片描述

③执行安装命令

在本地安装webpack 与 webpack-cli，用于项目使用

cnpm install webpack webpack-cli -D  //-D是本地安装

安装完成后的项目目录
在这里插入图片描述

Webpack的基本使用

模块化

Gulp的关注点主要在于流程的自动化，而webpack的关注点这主要在于实现模块化开发

ES6模块语法

ES6模块主要有两个功能：export和import

  • export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
  • import用于在一个模块中加载另一个含有export接口的模块

示例演示

  • 先创建两个js文件: m1.js , m2.js ，这两个js文件表示两个模块。
  • 然后在创建一个index.js，这个文件引入了m1.js ，m2.js 这两个
    模块中的内容（这里就会使用到前面学的es6模块化语法，import,export）
  • 同时index.js这个js文件也是项目入口文件，webpack会从这个文件中寻找相关依赖模块然后进行打包，生成最终打包后的文件main.js
  • 然后在创建一个index.html，这个文件引入了打包后生成的main.js文件，从而可以直接使用m1.js,m2.js两个模块中的内容
    在这里插入图片描述
    创建基本目录
  • Src ：放置模块文件目录Component与入口js文件m1.js,m2.js
    Component: 放置所有的模块js
  • Dist ：放置index.html和 打包后生成的main.js文件
    在这里插入图片描述

模块一：src/component/m1.js代码

function m1() {
    console.info("我是模块一：m1.js");
}
export { m1 }; //将m1模块导出

模块二：src/component/m2.js代码

function m2() {
    console.info("我是模块二：m2.js");
}
export { m2 }; //将m2模块导出

入口文件：src/index.js代码

import {m1} from "./component/m1.js";
import {m2} from "./component/m2.js";

m1();//执行m1模块中的内容
m2();//执行m2模块中的内容

网页文件：dist/index.html代码

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack test</title>
    <!-- 直接引入打包后生成的文件 -->
    <script src="main.js"></script>
</head>

<body>
    <div>webpack test</div>
</body>

</html>

开始打包

直接打开vscode的终端，在项目的根目录下执行webpack就可以让webpack通过index.js入口文件进入项目中把m1.js , m2.js打包为main.js文件让index.html引入
在这里插入图片描述
运行dist下的inde.html网页文件，观察结果，成功的运行
在这里插入图片描述

关于警告

在这里插入图片描述
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
这个警告的含义是说让你必须设置一个打包模式：开发 或 生产

开发模式 或 生产模式

我们使用webpack，通常需要定义两个配置文件，一个用于development环境，一个用于production环境
这里我们在打包时指定下打包模式即可，如下：

webpack --mode development    //表示打包为开发模式
webpack --mode production  //表示打包为生产模式（即最终发布的模式），默认模式

一般而言，生产模式下只打包必须要的东西，不会考虑声明开发调试的友好性，打包出来的代码不会压缩，打包出来的东西一般比较小。而开发模式打包出来的东西就比较大了

打包为开发模式

在这里插入图片描述

打包为生产模式

在这里插入图片描述

把打包命令写入package.json中

在package.json添加如下命令：

"dev":"webpack --mode development",
"pro":"webpack --mode production",

在这里插入图片描述

打包演示–开发模式打包

命令：

npm run dev

在这里插入图片描述

打包演示–生产模式打包

命令：

npm run pro

在这里插入图片描述

关于webpack4零配置

使用babel时需要.babelrc配置文件
使用gulp时也需要gulpfile.js配置文件
那么现在使用webpack是否也需要一个配置文件呢？上面我们并没有使用配置文件也打包成功了

实际上这是webpack4新出的特性，在webpack4以前是需要配置文件 webpack.config.js 的，配置文件用于配置打包相关的各种信息

而在webpack4时，在简单项目下允许你不使用配置文件，即零配置也能打包成功
这个零配置指的是：

  1. 在webpack4中它会默认定义./src/index.js为入口文件。
  2. 在webpack4中它会默认定义一个输出文件main.js到dist中。
  3. 这相当于是他默认给我们创建了一个配置文件，其中指定了打包的入口文件和出口文件信息，然后只要我们按照这个目录结构构建我们的项目，那么在我们没有用到webpack的复杂功能时，我们就可以不使用配置文件，也能打包成功

当然，如果你没有用配置文件，目录结构又不是这样写的，那么自然打包就会失败，如下我就把入口文件index.js改为了index1.js，然后就打包失败了
在这里插入图片描述

配置文件

在目录下创建配置文件webpack.config.js
配置文件基本内容如下

const path = require('path');
module.exports = {
    entry: './src/index.js', //表示入口文件，即从index.js进入我们的项目
    output: { //表示输入文件相关信息
        path: path.resolve(__dirname, 'dist'), //输出到当前目录下的dist文件夹，如果不存在就会自动创建一个
        filename: 'main.js' // 表示打包后生成的最终js文件
    }
};

在这里插入图片描述
我们把entry改为index1.js，然后把项目中的index.js也改为index1.js也可以打包成功了
在这里插入图片描述
注：这里我用的webpack4，3的版本打包不一样的，可以在网上搜一下

BoomShaKa_S
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack：简单易懂的webpack入门教程
02-06
本教程将带你一步步了解并掌握 Webpack 的基本概念和常用配置，让你快速入门。 一、Webpack 基本概念 1. **入口（Entry）**：Webpack 开始构建的起点，定义了应用的主文件或多个入口文件。这通常是应用程序的 `...
boilerplate-react-webpack:Webpack React入门解决方案
05-01
React的入门Webpack项目这是一个入门项目，使用webpack转换和捆绑ES6 React代码。 要使用，请考虑以下步骤： 分叉此回购根据您正在构建的应用程序重命名您的存储库git clone https://github.com/[your-account]/...
webpack注意事项
ASIA_技术
09-18 205
本文所有代码都在GitHub npx webpack 打包命令 注意，webpack 不会更改代码中除import和export语句以外的部分。如果你在使用其它ES2015 特性，请确保你在 webpack 的loader 系统中使用了一个像是Babel或Bublé的转译器。 如果webpack.config.js存在，则webpack命令将默认选择使用它。 c...
带你了解webpack
weixin_34064653的博客
10-15 158
1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来，网页能够和服务端通讯，js能做的事越来越多，文件体积越来越大，互相引用原来越多。然而网速只有几兆的带宽。于是想到，要把js文件狠狠的压缩，能合并的就给合并起来 主要有的js压缩工具： JSMin 使用简单...
webpack-cli构建优质项目
weixin_42975115的博客
09-08 751
本笔记借鉴与 https://www.webpackjs.com/guides/getting-started/ 在模块化开发中，我们平常引用个个模块的脚本代码都是通过 无法立即体现，脚本的执行依赖于外部扩展库(external library)。 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。 使用webpack 可以打包代...
终端将被任务重用，按任意键关闭
热门推荐
qq_30467819的博客
04-23 1万+
. 终端将被任务重用，按任意键关闭 https://www.bilibili.com/video/BV1EJ411V7uN?t=2 看B站这个视频做的安装和配置出现 终端将被任务重用，按任意键关闭 有三个配置文件改tasks.json最后一行 “panel”=“shared” 改为"panel"=“new” 原文https://blog.csdn.net/TalesOV/article/det...
webpack：两小时极速入门
席木木的博客
10-21 704
webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler），主要用于编译JavaScript模块，基于webpack的cli脚手架或者API可实现前端应用的模块化开发。 当webapck处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或者多个bundle。
webpack自动化构建工具详细笔记，入门到实战，解决 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，和webpack : 无法加载文件等等
殷志鹏的博客
04-09 1571
目录
Webpack基础入门与使用
weixin_44786238的博客
07-11 322
Webpack基础入门与使用 Time：2021-3-7 前言 在今天终于准备开始系统学习vue了，vue的基本语法非常简单，其真正需要理解的是，如何使用，怎么使用，使用的逻辑。vue最强大的功能在于其组件化的功能，自定义的功能，可以极大简结前端HTML页面的代码，而维护只需要对进行相应的组件化了的vue template进行维护于修改，其次就是可以扩展html元素，使得前端开发具有更大的自由度。基于vue这种组件化的思维，在较大的项目中会出现大量的vue文件和js文件，而webpack就提供了一种模块化的
Webpack: Loader开发 (1)
Wang的专栏
07-02 1698
如何扩展 Webpack？有两种主流方式，一是 Loader —— 主要负责将资源内容翻译成 Webpack 能够理解、处理的 JavaScript 代码；二是 Plugin —— 深度介入 Webpack 构建过程，重塑构建逻辑。相对而言，Loader 的职责更单一，入门成本相对较低。我们关注以下的基础Loader 的基本形态与输入输出如何使用 Loader Context 上下文接口，并结合一些知名开源项目展开介绍部分常用接口如何为 Loader 编写自动测试代码。
webpack入门进阶调优第一章
YUSIR 完美CODING世界
10-24 205
1.1何为Webpack webpack是开源的JS模块打包工具 核心功能是解决模块之间的依赖，吧哥哥模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件。这个过程叫模块打包 1.2为何需要Webpack 1.2.1何为模块 在设计程序结构时，更好的组织方式是按照特定的功能将其拆分为多个代码段，每个代码段实现一个特定的目的。可进行独立的设计开发测试，最终通过接口来组合在一起，这就是基本的模块化思想。 1.2.2 JavaScript中的模块 JavaScript中没有模块，Brendan
start_webpack:webpack入门项目，涵盖了搭建一个新应用程序的大部分需求
05-21
启动Webpack 一个简单的应用程序，可帮助您开始使用ES6和Webpack。 开始： npm安装所有依赖项 在命令行中运行npm start并打开浏览器到localhost：3002 玩得开心 去测试： npm测试 玩得开心
simple-webpack:简单的Webpack 3入门教程
05-16
简单的Webpack 这是一个简单的webpack 3教程，可以帮助您熟悉webpack的基础知识。 要求 Node.js 设置 npm install 建造 npm run build开发模式 npm run build:prod进入生产模式 构建命令从./src文件夹构建我们的...
angular-webpack:带有Webpack的Angular入门套件
05-14
Angular Webpack 带有的Angular入门套件入门依存关系（> = 6.9.1）设置git clone https://github.com/bellizio/angular-webpack.git cd angular-webpack yarn install概述这是一个基于官方的Angular Webpack入门工具...
webpack plugin
m0_73280507的博客
08-08 458
syncWaterfallHook是一个同步的，瀑布类型的hook，瀑布类型的钩子就是如果前一个事件的函数结果部位undefined，则result会作为后一个事件函数的第一个参数，也就是上一个函数的执行结果会成为下一个函数的参数。tapable是一个类似于nodejs的eventEmitter的库， 主要是控制钩子函数的发布喝定于，当时，tapable提供您的hook机制比较全面，分为同步和异步两个大类， 根据事件执行的终止条件的不同。BailHook: 顺序执行hook，遇到第一个结果result!
【面试经验】24届前端校招 字节、阿里、美团、快手、腾讯面试经验汇总
最新发布
litterfinger的博客
08-11 365
CSS发展史：从预处理语言（less,sass）到PostCSS，为解决namespace约束——CSS Module和CSS in JS，原子化CSS决了什么问题。aysnc和await（ysnc本质是generate函数的语法糖），场景题比如实现3个请求的串行。以下是本人在两个月的秋招进程中，面了等等，记录和回忆的一些面试问题。webpack各种配置，动态加载，分包等等。设计模式相关，发布订阅，观察者模式等等。跨域问题，解决方法，CORS的请求头。html的解析步骤，浏览器的渲染原理。
vue.config.js 配置
a123456234的博客
08-08 870
vue.config.js 文件是 Vue CLI 项目中的全局配置文件，它允许你以 JavaScript 的形式来配置构建选项，而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。
Webpack Bundle Analysis：减少包体积的技巧
天涯学馆
08-08 847
Webpack 是一个流行的 JavaScript 模块打包器，它能够将项目中各种类型的模块和资源打包成一个或多个 bundle。然而，随着项目的复杂性增加，bundle 的体积也会随之增大，这可能导致加载时间变长，影响用户体验。
Webpack入门：核心概念与依赖机制详解
Webpack 是一款强大的前端构建工具，它被设计用于现代 JavaScript 应用程序的模块打包。本篇文章将带你深入了解 webpack 的基础概念以及其在前端工程化中的关键作用。 首先，我们从webpack 的核心概念入手。Webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值