WebPack

最新推荐文章于 2023-08-06 14:02:43 发布
最新推荐文章于 2023-08-06 14:02:43 发布
阅读量6.6k 收藏 12
点赞数 5
分类专栏： Web前端
记录平时的问题，完全是给自己看的，垃圾博客，浪费各位大佬时间...
本文链接：https://blog.csdn.net/qq_40794973/article/details/95480527
版权

一、webpack 常用命令 

  • 查看webpack版本信息：npm info webpack versions
  • 全局安装：npm install webpack webpack-cli -g
  • 全局安装指定版本：npm install webpack@4.16.5 webpack-cli -g
  • 卸载全局安装：npm uninstall webpack webpack-cli -g
  • 查看版本：webpack -v （node.js会在全局的模块目录中去找这个命令，没有安装会找不到这个命令的）
  • 项目内安装：npm install webpack webpack-cli --save-dev（--save-dev可以等价为-D）
  • 查看项目内webpack版本：npx webpack -v
  • npm install webpack --save
  • 使用项目webpack打包js文件：npx webpack Xxx.js
  • 使用全局的webpack打包js文件：webpack Xxx.js
  • node -v
  • npm -v
  •  初始化npm：npm init -y
  • 安装项目依赖包：npm install

注：webpack-cli 能让我们在控制台运行 webpack 命令的，但是按照webpack这个的时候webpack-cli回跟着安装的不用显示的安装

二、 webpack 配置文件

 index.js

var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');

new Header();
new Sidebar();
new Content();

 header.js

function Header() {
	var dom = document.getElementById('root');
	var header = document.createElement('div');
	header.innerText = 'header';
	dom.append(header);
}

module.exports = Header;

 content.js

function Content() {
	var dom = document.getElementById('root');
	var content = document.createElement('div');
	content.innerText = 'content';
	dom.append(content);
}

module.exports = Content;

 sidebar.js

function Sidebar() {
	var dom = document.getElementById('root');
	var sidebar = document.createElement('div');
	sidebar.innerText = 'sidebar';
	dom.append(sidebar);
}

module.exports = Sidebar;

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>这是最原始的网页开发</title>
</head>
<body>
	<p>这是我们的网页内容</p>
	<div id='root'></div>
	<script src='./bundle.js'></script>
</body>
</html>

当我们使用  npx webpack Xxx.js 执行打包命令的时候，似乎没有看见配置文件的影子，其实这个时候使用的是webpack的默认配置

默认的配置文件：webpack.config.js

const path = require('path');
// 配置
module.exports = {
	// 1. 项目重那个文件开始打包
	entry: './src/index.js',
	// 2. 打包文件放到哪里
	output: {
		// 3. 打包好的文件的名字
		filename: 'bundle.js',
		// 4. 打包出的文件放在哪个文件夹下 path要是绝对路径
		// __dirname就是webpack.config.js的绝对路径，和dist结合
        // 不写效果一样，默认就是
		path: path.resolve(__dirname, 'dist')
		// 绝对路径
		// path: path.resolve('F:/Test/GitTest2/')
	}
}

 手动指定配置文件： npx webpack --config Xxx.js

使用 npm scripts 简化配置

 在 package.json 里面有一个scripts属性，这个数据是配置执行脚本的

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

scripts 配置的 webpack 首先会在当前项目中找 webpack，然后才去全局找所以 webpack 前面不需要加 npx， 我配置了webpack.config.js后面就不需要打包的js入口文件了

现在我们执行打包命名：npm run bundle （npx webpack Xxx.js）

  • npm run bundle -> webpack

打包输出类容 

PS F:\Procedure\Html\webpack\01-04\lesson> npx webpack
Hash: 1b24ce275a9479386bf2
Version: webpack 4.25.1
Time: 114ms
Built at: 2019-07-11 7:53:18 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  1.36 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js 159 bytes {0} [built]
[1] ./src/header.js 187 bytes {0} [built]
[2] ./src/sidebar.js 193 bytes {0} [built]
[3] ./src/content.js 193 bytes {0} [built]

 Chunk Names 输出main，就是entry里面的

const path = require('path');
module.exports = {
	entry:{
		main:'./src/index.js',
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}
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/
const path = require('path');
module.exports = {
	// 不配置这个会有警告，但是它会给我们设置成这个
	// production 打包出的文件会被压缩
	// development 不压缩
	mode:'production',
	entry:{
		main:'./src/index.js',
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}

 

三、 使用WebPack打包其他文件

file-loader

打包图片

webpack.config.js

const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	// webpack默认知道如何处理js模块，但是不知道jpg这种文件怎么打包
	// 我们这里需要配置
	module: {
		// 可以定义多个规则
		rules: [{
			// 正则匹配 jpg png gif文件
			test: /\.(jpg|png|gif)$/,
			use: {
				// 定义一个loader 需要手动安装 file-loader (npm install file-loader -D)
				loader: 'file-loader',
				// 配置参数
				options:{
					// 打包的图片和原图片一模一样（名字后缀）
					// placeholder 占位符  https://webpack.js.org/loaders/file-loader/
					name:'[name].[ext]',
					// 可以指定图片打包的位置（不然在dist目录里面）
					outputPath:'images/'
				}
			} 
		}]
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}

 index.js

import avatar from './avatar.jpg';
console.log(avatar);

var img = new Image();
img.src = avatar;

var root = document.getElementById('root');
root.append(img);

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id='root'></div>
	<script src='./bundle.js'></script>
</body>
</html>
  • npm install  file-loader  -D 
  •  npx webpack

url-loader

当一个图片文件大于我们配置的值的时候，url-loader 和 file-loader 的效果是一模一样的

如果图片小于我们设置的值， url-loader 不会打包图片，他会把图片转成base64

const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				// 图片转换成 base64
				// 适合小图片
				loader: 'url-loader',
				options: {
					// name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					// 设置图片大小，是转base64还是打包到文件
					// 小于这个值都会转base64，当图片大于这个值这个时候url-loader和file-loader是一样的
					// kb
					limit: 1024000
				}
			} 
		}]
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}
{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^2.0.0",
    "url-loader": "^2.0.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

 

  • npm install --save-dev url-loader  

或者

  • npm install  url-loader  -D

 

爪 哇
关注
专栏目录
webpack
03-09
Webpack 是一个现代JavaScript应用程序的模块打包工具。它将应用程序的所有依赖关系视为“模块”，然后将这些模块转换为一个或多个浏览器可理解的输出文件，以便在网页上运行。这个过程通常被称为“打包”。Webpack ...
【Vue】笔记六：webpack底层深入讲解，从初识到精通，真正实现从0到1的过程
weixin_55846296的博客
06-07 899
Webpack是一个非常强大的打包工具，广泛用于前端项目的构建。Webpack 的功能十分强大，但也十分复杂，光是配置就有一堆参数。本篇文章将从基础部分到深入层次逐步讲解 webpack 的应用，帮助您了解 webpack 配置文件和各个组成部分的作用，以及如何优化 webpack 性能。经过上面的讲解，我们应该对 Webpack 有了更深入的了解。Webpack 提供了很多便捷的功能和插件，可以帮助我们进行配置和优化，使我们的项目开发变得更容易。
Vue+Webpack+Grunt集成
weixin_34417635的博客
12-16 253
说明 Vue、Grunt、Webpack的知识请看官方网站 Grunt Tasks:构建、开发调试、打包，命令：grunt build,grunt default,grunt zipall。。。 Webpack:编译Vue、压缩文件 http2:启动http/2服务，命令 node http2.js server:启动http/1.x服务，命令：node server.js 配置 webpack...
webpack打包工具 入门学习 1
DOM曼珠沙华的博客
06-19 213
webppack是什么？ 官网地址：https://webpack.js.org/ webpack is a module bundler(模块打包⼯具) Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别 出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所 有的依赖打包到⼀个单独的⽂件中 是⼯程化、⾃动化思想在前端开发中的体现 安装 因为webpack是基于node.js的，所以需要先安装nodeJs， NodeJs https
webpack底层学习总结(爆肝)
最新发布
weixin_47121832的博客
08-06 236
爆肝四万字带你深入webpack底层原理
webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程
ztK63LrD的博客
10-23 3897
根据上文webpack是有默认打包的入口与出口路径文件的，如果想修改的话，看如下操作：在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。// 导入路径模块// 使用 node.js 语法向外导出一个 webpack 的配置对象// 代表webpack运行模式,可选值:开发模式(development)和生产模式(production)// entry:'指定要处理的文件路径'// output:指定生成的文件要存放到哪里output:{// 存放目录。
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
webpack_react
09-18
Webpack 和 React 是现代前端开发中的两个重要工具。Webpack 是一个模块打包器，它将应用程序视为由各种模块组成的，然后将这些模块打包成一个或多个浏览器可执行的文件。React 则是一个用于构建用户界面的 ...
webpack.zip
01-28
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将各种资源（如JavaScript、CSS、图片等）视为模块，并将它们转换和打包成优化过的静态资源，以便在浏览器中高效地运行。这个压缩包“webpack.zip”包含了对...
记录 - 关于 webpack 中文文档的网址
weixin_34233856的博客
12-11 216
我最近尝试换一份工作，想着了解一下 webpack、babel、react 的最新内容，准备面试，于是找各个文档来看。 我看了一天英文文档，进度一般，便想转看中文文档，印象中这篇文章 前端工程不了解？带你踩坑加爬坑。，指向了一个中文文档 www.webpackjs.com。我打开一看，版本号同步，网页样式一样，再看这域名 webpackjs.com，似乎比 官方 域名 webpack.js.org...
webpack.js.org：Webpack文档的存储库等等！
02-03
webpack.js.org 指南，文档和所有webpack内容。 内容进度 既然我们已经涵盖了许多缺少的文档积压工作，我们将开始大量审查站点内容的每个部分，以对它们进行适当的排序和结构化。 下列问题应该可以很好地了解事物的位置和走向： 我们还没有为其他部分创建问题，但是很快就会发布。 有关与开发人员相关的工作，请参见。 翻译 为了帮助翻译本文档，请跳转到。 版本控制 从webpack 4开始，我们为与旧版webpack版本匹配的旧版文档创建了基于子域的存档。 webpack 4的文档可从获得，并从部署 有许多已知的问题需要修复（ ）。 贡献 如果您有兴趣编辑此站点上的内容，请通读。 请参阅以了解如何在本地设置和开始在站点上工作。 执照 该内容可通过许可获得。 特别感谢 BrowserStack慷慨地允许我们免费进行网站的跨浏览器和跨操作系统测试... Vercel已给我们提供了Pro帐户。
webpack-底层原理（Loader编写、Plugin编写、 Bundler编写）
火腿肠的博客
07-29 724
1
vue高级-webpack
ziyer666的博客
03-20 161
一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】 grunt gulp ( 4.x ) Browserify ( Webpack 前身 ) Webpack 【 主流行 】 rollup.js https://www.rollupjs.com/guide/zh 【 小众 】 parcel 【 小众 】 FIS https://fis.baidu.com/ 【 小众 】 ...
Webpack底层原理及核心概念实际应用（一篇封神系列）
陈新科的博客
03-15 1148
Webpack是一个现代化的代码打包工具，它将多个JavaScript文件打包成一个或多个文件，其中包含所有的依赖项。它通过减少网络请求的数量来提高网站的性能。Webpack还支持许多其他的资源，如图片，样式和字体等。Webpack最初是为Node.js开发的，但它可以用于其他任何类型的Web应用程序或Node.js项目。Webpack基于模块化开发的理念，它支持所有主要的模块化开发规范，包括CommonJS，AMD，ES6模块。
webpack学习系列一（https://webpack.js.org/concepts/ 翻译）
cotexarm7的专栏
07-31 2936
概念webpack是现代js应用的模块打包器，当用webpack处理你的应用时，它递归的建立一个依赖图，依赖图中包含你的应用需要的所有模块，然后将这些模块打包成少量的包，通常是一个包，供浏览器加载。它是可配置的，你首先需要理解4个核心概念，entry入口、output出口、loaders加载器、plugins插件。这个文档将宏观讲述这些概念，同时，利用具体案例具体描述这些概念。Entry 入口we...
webpack 干货总结
一只倔强的蜗牛的博客
05-12 252
一、概述： webpack 是一个模块打包工具！ 官网地址 官方文档查阅技巧： concepts：概念 configuration：配置项 loaders：官方相关loader guides：指南 1. npm 使用npm（node包管理工具）创建一个符合node规范的项目，生成包管理文件package.json npm init 注：要想用webpack...
webpack底层原理 实现一个打包工具 bundler源码编写
qq_40036736的博客
06-28 1371
类似于webpack打包工具的底层原理 步骤：1.拿到入口文件的代码并读出来转化为js对象(抽象语法术parser) 2.拿到所有模块的依赖 ‘./message.js’,放进数组中 引入第三方模块和babel相关 3.对代码进行转换使浏览器能够执行从es6/es module语法转化 目的：入口文件的完整分析 node bundler.js //输出文件内容 实现 创建函数 传入入...
Webpack底层原理及脚手架工具分析
jiegiser博客
06-17 2304
1. 如何编写一个Loader
webpack核心概念详解及其运行原理
何建的博客
08-06 1230
* Entry: 入口, webpack执行构建的第一步将从Entry开始，可抽象成输入 * Module: 模块，在webpcak中一切皆模块，一个模块对应一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。 * Chunk: 代码块，一个Chunk由多个模块组合而成，用于代码合并于分割 *Loader: 模块转换器，用于将模块的原内容按照需求转换成新内容。 *Plu...
Webpack入门与安装指南
"Webpack学习笔记是一个详细的指南，介绍了webpack的基本概念、安装方法以及配置过程。主要涵盖以下几个知识点： 1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值