webpack4的学习

最新推荐文章于 2023-07-08 13:36:47 发布
最新推荐文章于 2023-07-08 13:36:47 发布
阅读量381 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongtaochi0464/article/details/91891914
版权

webpack是个前端资源加载/模块打包器，将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源文件。
官网：https://webpack.js.org/
在这里插入图片描述

1. 安装webpack4

(1)webpack4 需要的node版本最低为8.9.4，所以建议把node升级为9以上。
(2)安装webpack和webpack-cli
命令：
npm install webpack -g
npm install webpack-cli -g
在写这篇文章的时候 我用的webpack版本为@4.35.0 webpack-cli的版本为@3.3.5

2. 基本使用

2.1 基础用法

我们在文件夹下新建两个文件 index.js 和 hello_module.js。
在这里插入图片描述
其中文件的内容分别为：

//hello_module.js
let obj = {
	sayHello:function(){
		console.log("hello");
	}
}

module.exports = obj

//index.js
let f1 = require('./hello_module.js').sayHello;

f1()

可以看出index.js依赖于hello_module.js这个模块。
使用node运行index.js如下所示
在这里插入图片描述
我们试着把这两个文件进行打包。所以我们可以设置index.js为入口文件。
基本打包命令：webpack 入口文件名 -o 出口文件名
在这里插入图片描述
打包出来可以看到文件夹下出现了output.js这个文件
在这里插入图片描述
使用node运行output.js可以看到也成功的打印Hello了
在这里插入图片描述
但是我们在打包的时候会看到一个提示：mode模式还没有选择。如果没有设置webpack将默认选择为production生产模式。
在这里插入图片描述
我们来看看production(生产模式)和development(开发者模式)的webpack打包 有什么不同呢~
在这里插入图片描述
我们使用上面的命令行以开发者模式打包出来了output_dev.js
在这里插入图片描述
我们可以看到打包出来两个文件大小，开发者模式的明显要比生产模式的大。其实是开发者模式为我们提供了一些功能，我们会在后面具体分析~

2.2 零配置文件用法

webpack4的新特性支持零配置文件打包。换句话说，就是不需要配置打包的入口/出口文件了。默认的入口文件地址为src/index.js，默认的出口文件地址为dist文件夹。
我们来验证一下：

在src文件夹中放入了这两个文件，并在test2文件夹中执行webpack
在这里插入图片描述
可以看到，在test2文件夹下生成了dist文件夹，打包文件为main.js
在这里插入图片描述
执行node命令依然打印出了 hello，即说明也打包成功了~
在这里插入图片描述
但其实我们真正的工程项目中，配置文件是必不可少的。下面我们来学习一下webpack的配置文件。

2.3 webpack配置文件

2.3.1 基础配置

webpack的基础配置要写在webpack.config.js中，而最基础的是在其中设置webpack打包的入口、出口地址。其基本配置如下

//webpack.config.js
const path = require('path');
module.exports = {
   entry:'./input.js', //当前入口文件
   output:{
   	path:path.resolve(__dirname,'dist'),
   	filename:'ouput.bundle.js'
   }
};

在工程中，我们往往需要多入口文件打包。而配置文件中的entry支持我们传入一个对象。

const path = require('path');
module.exports = {
   entry:{
   	home:'./home.js',
   	about:'./about.js',
   	other:'./other.js'
   },
   output:{
   	path:path.resolve(__dirname,'dist'),
   	filename:'[name].bundle.js' //这个name将自动打包为homg/about/other
   }
};

入口的三个文件分别为：

//home.js
const home = function(){
   console.log("home");
}
//about.js
const about = function(){
   console.log("about");
}
//other.js
const other= function(){
   console.log("other");
}

我们来尝试一下 使用webpack.config.js来进行模块打包，在test3文件夹中运行webpack，可以看到在dist文件中，打包出了三个文件。
在这里插入图片描述
我们随便选一个打包出来的文件去查看时，会发现console.log都没有被打包进去。这是由于我们默认的打包模式为production(生产模式)，会自动进行tree shaking。我们在配置文件中可以设置打包模式。

const path = require('path');
module.exports = {
   entry:{
   	home:'./home.js',
   	about:'./about.js',
   	other:'./other.js'
   },
   output:{
   	path:path.resolve(__dirname,'dist'),
   	filename:'[name].bundle.js' //这个name将自动打包为homg/about/other
   },
   mode:"development" //设置模式为开发者模式。
};

这时候打包出来的代码中就能看到console.log了。这就是生产者模式和开发者模式的另一区别。

3. 加载器Loader

loader是webpack用来预处理源文件的。比如说我们的源文件是typescript、图片等，都需要使用loader来讲其转换为浏览器可以执行的js文件。可用的loader有很多，在https://webpack.js.org/loaders/ 中都可以找到。以下我就简单介绍几种loader的用法

3.1 url-loader

功能：当文件的大小小于某个指定的大小的时候，会将文件转换成DataURL的形式，即base64形式。
用途：由于每一个网页可能都会有一些很小的图标图片，如果将这些小的图标都单独打包的话，需要发送许多次请求，使页面加载缓慢。很早之前的做法是使用雪碧图，现在我们可以使用url-loader将这些图标转换成base64的形式，存放在js文件中。

使用url-loader首先需要在webpack.config.js文件中添加下面的代码

module:{
	rules:[
		{
			test:/\.(png|jpg|gif)$/i, //正则匹配由png jpg gif格式的文件
			use:[
				{
					loader:'url-loader', //使用url-loader为这些文件进行打包
					options:{
						limit:8192 //限制文件的大小在8k以下
					}
				}
			]
		}
	]
}

我们来看看实际的例子吧~test4中，文件结构如图。
在这里插入图片描述
且注意一下test1，test2的文件大小。test1大于8k，test2小于8k。
在这里插入图片描述
input.js的内容为：

const good = "hello";

import img1 from './img/test1.jpg'
import img2 from './img/test2.jpg'

webpack.config.js的内容为：

const path = require('path');
module.exports = {
	entry:"./input.js",
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js' 
	},
	mode:"development", //设置模式为开发者模式。
	module:{
	rules:[
		{
			test:/\.(png|jpg|gif)$/i, //正则匹配由png jpg gif格式的文件
			use:[
				{
					loader:'url-loader', //使用url-loader为这些文件进行打包
					options:{
						limit:8192 //限制文件的大小在8k以下
					}
				}
			]
		}
	]
}
};

我们试着执行webpack命令
在这里插入图片描述
当然是会报错的，因为我们使用了url-loader却没有安装它。我们先使用npm init -y生成一个package.json文件。
在这里插入图片描述
然后使用npm install url-loader -S 安装url-loader并且将其写入配置文件中(-S的作用)。
在这里插入图片描述
我们可以看到package.json中添加了一行 “url-loader“ : "^2.0.0"
由于url-loader还需要以来file-loader，所以我们再执行 npm install file-loader -S来安装file-loader
在这里插入图片描述
这样，file-loader和url-loader都被成功的安装并配置了。这时再执行webpack命令，就可以成功的打包了。
在这里插入图片描述
打包出来的dist文件中，我们只能看到一张图片。可我们明明打包的是两张图片呀？
在这里插入图片描述
原因是什么呢？因为我们在webpack.config.js中设置的限制文件大小为8k以下。也就是说，在8k以下的test2.jpg被打包成了base64编码在js文件中。而8k以上的test1.jpg打包成了单独的文件。
打开打包好的文件output.bundle.js我们也能看到这样的结果~
在这里插入图片描述

3.2 babel-loader

功能：将ES6、ES7的语法转换成ES5的语法。
用途：因为有些低版本的浏览器对ES6语法的支持比较低。如果不使用babel进行打包的话将不能实现正常功能。

与url-loader一样，使用babel-loader也需要在webpack.config.js中添加下列代码:

module:{
	rules:[
		{
			test:/\.m?js$/, //正则匹配.js格式的文件
			exclude:/(node_modules|bower_components)/, //排除掉一些文件夹
			use:[
				{
					loader:'babel-loader', //使用babel-loader为这些文件进行打包
					options:{
						presets:['@babel/preset-env'] //某些使用的规则
					}
				}
			]
		}
	]
}

我们来看看实际的例子，在test5中，文件的结构如图。(记得使用npm init -y生成一个package.json文件)
在这里插入图片描述
安装：我们使用npm install -D babel-loader @babel/core @babel/preset-env webpack 安装babel-loader
安装后的package.json文件会出现这样：
在这里插入图片描述
其中，input.js文件内容如下：

async function sayHello(){
	const result = await fetch('https://www.baidu.com');
	console.log(result);
}
sayHello();

如果配置文件没有加上babel-loader的rules。使用webpack打包后的文件，我们去搜索fetch，可以发现ES6的语法依然在。这在版本较低的浏览器上是没有办法处理的。
在这里插入图片描述
我们试着添加一下babel-loader的rules
webpack.config.js文件内容如下：

const path = require('path');
module.exports = {
	entry:"./input.js",
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js' 
	},
	mode:"development", //设置模式为开发者模式。
	module:{
	rules:[
		{
			test:/\.(png|jpg|gif)$/i, //正则匹配由png jpg gif格式的文件
			use:[
				{
					loader:'url-loader', //使用url-loader为这些文件进行打包
					options:{
						limit:8192 //限制文件的大小在8k以下
					}
				}
			]
		},
		{
			test:/\.m?js$/, //正则匹配.js格式的文件
			exclude:/(node_modules|bower_components)/, //排除掉一些文件夹
			use:[
				{
					loader:'babel-loader', //使用babel-loader为这些文件进行打包
					options:{
						presets:['@babel/preset-env'] //某些使用的规则
					}
				}
			]
		}
	]
}
};

那么我们现在来使用webpack对input.js进行打包
最终在打包生成的output.bundle.js文件中，我们已经找不到async await这些ES6中才出现的语法了。
在这里插入图片描述

3.3 sass-loader

功能：将sass/scss文件转换为css文件
与上面的步骤相同。就不细说了。
安装：
我们使用npm install sass-loader node-sass -D 安装sass-loader
我们使用npm install style-loader css-loader -D 安装sass-loader

与url-loader一样，使用babel-loader也需要在webpack.config.js中添加下列代码:

module:{
	rules:[
		{
			test:/\.scss$/, //正则匹配.js格式的文件
			use:[
				"style-loader"
				"css-loader"
				"sass-loader"
			]
		}
	]
}

4. 插件Plugin

4.1 MiniCss

安装：npm install mini-css-extract-plugin -D
在配置文件中引入： const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
在webpack.config.js中引入下面的语句：(rules里有所变化，注意！)

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
	plugins:[
		new MiniCssExtractPlugin({
			filename:"[name].css", //name就是entry的键名
			chunkFilename:"[id].css"
		})
	],
	rules:[
		{
			test:/\.scss$/,
			use:[
				process.env.NODE_ENV !== 'production' ? 'style-loader': MiniCssExtractPlugin.loader,
			]
		}
	]
}

这样会在开发者模式中，将css单独打包成一个.css文件，更好的分离代码。避免bundle文件非常的大，也便于开发时debug。

4.2 DefinePlugin

通常我们在项目中会有两个环境：生产环境和开发环境。不同的环境中需要配置不同的需求，如访问不同的服务器地址等。这时候就可以使用DefinePlugin来设置服务器地址为一个变量，在写代码时只使用这一个变量即可。如：

new webpack.DefinePlugin({
	'SERVICE_URL':JSON.stringify('http://www.baidu.com')
});

我们来试一试吧~
在test6文件夹中，文件的结构是这样的
在这里插入图片描述
其中，input.js内容为:

async function sayHello(){
	const result = await fetch(SERVICE_URL);
	console.log(result);
}
sayHello();

webpack.config.js内容为：

const path = require('path');
const webpack = require('webpack')
module.exports = {
	entry:"./input.js",
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js' 
	},
	mode:"development", //设置模式为开发者模式。
	plugins:[
		new webpack.DefinePlugin({
			'SERVICE_URL':JSON.stringify('http://www.baidu.com')
		})
	]
};

我们使用webpack进行打包后，文件的结构是这样的：
在这里插入图片描述
我们打开打包后的文件可以看到SERVICE_URL已经被替换成为了http://www.baidu.com。这样能够方便我们修改一些变量，而不影响整个工程。
在这里插入图片描述
(这应该还要加上babel转ES6语法，但我做的时候忘了。。)

4.3 HtmlWebpackPlugin

由于浏览器中，js文件不能单独运行，所以需要将打包好的js文件搭载在html文件中执行。HtmlWebpackPlugin就给我们提供了这样一个功能。
安装：npm install html-webpack-plugin -D
并对webpack.config.js进行如下的修改：

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
 	plugins:[new HtmlWebpackPlugin()] //在plugin中添加这一段代码
 }

这样执行webpack就会生成一个index.html，自动帮我们引入打包好的css和js文件。
我们来尝试一下~
在上一个test6的基础上，我们将webpack.config.js文件修改成如下：

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry:"./input.js",
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js' //这个name将自动打包为homg/about/other
	},
	mode:"development", //设置模式为开发者模式。
	plugins:[
		new webpack.DefinePlugin({
			'SERVICE_URL':JSON.stringify('http://www.baidu.com')
		}),
		new HtmlWebpackPlugin()
	]
};

其余不变，现在我们执行webpack命令进行打包。文件的结构变成了这样：
在这里插入图片描述
再打开这个新生成的index.html文件，会发现他自动帮我们引入了打包好的js文件。
在这里插入图片描述
当然，生成的html文件我们也是可以自己做一些定义的。比如生成的标题等等。可以在下面的官方文档中查询
https://webpack.js.org/plugins/html-webpack-plugin/
https://github.com/jantimon/html-webpack-plugin
在这里插入图片描述

我是刺猬姑娘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4打包实战
woyebuzhidao321的博客
02-17 3705
一、模块化打包工具的由来 ES Module存在环境兼容问题，通过模块化方式划分的模块较多，网络请求频繁，在前端应用开发中不仅仅需要JavaScript代码需要模块化，随着应用的日益复杂，html，css同样也面临相同的问题，也就是说，所有的前端资源都需要模块化。 所需要的工具需要满足的条件： 新特性代码编译 模块化JavaScript打包 支持不同文件类型的资源模块 打包工具：解决前端整体的模块化，并不单指JavaScript模块化 二、模块打包工具概要 核心： 模块打包器（Module bund
webpack4打包nodejs项目进阶版——多页应用模板
dazhongshuo1167的博客
12-13 405
前段时间我写了个打包nodejs项目的文章，点击前往 但是，问题很多。因为之前的项目是个历史遗留项目，重构起来可能会爆炸，当时又比较急所以就写个的适用范围很小的webpack的打包方法。 最近稍微得空，便动了重构的心思，重构第一步当然要把架子搭起来 而搭架子的过程也是十分地艰辛啊，终于大概搞定了前端的部分，这一次就分享一下使用最新的webpack4怎么打包nodejs的多页应用 ...
webpack4.x最详细入门讲解
10-28 440
前言 本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 一、什么是webpack，为什么使用它？ 1.1 什么是webpack？ 简单来说，它其实就是一个模块打包器。 1.2 为什么使用它？ 如果像以前开发时一个htm...
webpack学习
weixin_44434938的博客
07-29 525
webpack学习
史上最全webpack带你深入了解webpack
m0_62371650的博客
09-14 2158
史上最全webpack带你深入了解webpack
webpack4 optimization使用总结
10-16
主要介绍了webpack4 optimization使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-start:webpack V4 学习过程中搭建的项目
05-09
本项目是在我学习 webpack v4 的时候搭建的 vue-webpack demo 为什么在有 vue-cli 这类脚手架工具后还需要自己学着搭建呢？ 自己搭建一个项目可以加深对 webpack 的理解，包括各个插件，各个 loaders 等 webpack v4 ...
webpack4-资料
03-10
学习路线，能够让我们初级的掌握webpack打包的用法，也能够让我们快速了解webpack的语法
webpack4-demo:webpack4 官网学习demo
05-13
本项目说明 本项目分支命名均为 章节的拼音命名， 查看指南中的章节 code，可以切换分支运行代码 注意事项均写在各个分支下的 readme....webpack4 去掉了CommonsChunkPlugin，取而代之为optimization.splitChunks 和 o
浅谈Webpack4 Tree Shaking 终极优化指南
10-15
主要介绍了浅谈Webpack4 Tree Shaking 终极优化指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack4升级指南以及从webpack3.x迁移
xhsdnn的专栏
03-05 3万+
    几天前webpack发布了新版本v4.0.0，其中做了很多改动，包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本，本文就一个新的vue-cli创建的基于webpack的项目进行迁移。 题外话：不要看0配置是很有噱头，基本是不能满足大部分用户啊的需求，不过加...
webpack最详细学习
m0_56398485的博客
12-04 393
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，将各种类型资源打包编译为最基础的html、js、css、img等 创建npm项目 安装webpack以及脚手架 3、helloword 原始目录 index.html src/index.js1.src/index.js 引入外部模块 utils/createButton.js
webpack4版本学习1
sdiudui的博客
04-28 438
webpack4学习
Webpack4&5学习笔记
最新发布
m0_66989530的博客
07-08 922
Webpack4&5快速入门，手把手教你如何配置自己的脚手架
webpack学习从基础学起
kokunka的博客
04-23 1947
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack5和webpack4详解(一篇全搞懂，值得收藏)
h_1_h的博客
06-06 3593
webpack5和webpack4配置与优化,本篇教程是手把手教你从0到1新建webpack4工程化项目，按照下文的步骤最终会创建出一个高效率，高质量的通用webpack4脚手架，如果对下文代码有疑问，为了自己，请在编辑器里手敲代码，并运行试试。希望您不虚此行，现在起航......
webpack4 文档（入门） - 第九章 - targets
qq_36605165的博客
04-27 538
因为 javascript 可以运行在服务端和客户端，所以 webpack 有多目标构建方案。 注意：webpack 的 target 属性和 output.libraryTarget 这两个是没有联系的。 使用 index.js const fs = require('fs'); const path = require('path'); console.log(fs.toString()); console.log(path.toString()); console.log('run in node')
手摸手，带你用合理的姿势使用webpack4（上）
weixin_34128534的博客
08-07 285
本文作者来自 华尔街见闻技术团队 - 花裤衩 前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。并且说自己正在着手开发 webpack 5。 Oh you are sti...
webpack源码学习
05-31
4. 阅读 webpack 的核心模块 `lib/webpack.js`，了解 webpack 的编译流程和模块化实现。 5. 阅读 webpack 的插件系统，了解插件的注册和调用方式，以及插件的实现原理。 6. 阅读 webpack 的 loader 系统，了解 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值