Webpack

我的发量超多

已于 2022-06-07 21:11:02 修改

阅读量871

点赞数 3

文章标签： webpack 前端 javascript

于 2021-11-25 20:10:17 首次发布

本文链接：https://blog.csdn.net/pangqixjj/article/details/121540620

版权

Webpack基本概念：

Webpack 是一个前端资源加载/打包工具。

它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

webpack简单来说就就是一个配置文件，这个配置文件主要分为三大块：

entry ：入口文件让webpack用哪个文件作为项目的入口
output：出口让webpack把处理完成的文件放在哪里
module ：模块要用什么不同的模块来处理各种类型的文件

步骤：

建立项目

新建一个文件夹，并在DOS窗口使用npm init 命令创建 package.json 文件

npm init

在这里插入图片描述
这样会在根目录下生成一个package.json文件

安装webpack

webpack使用npm安装

全局安装：

npm install webpack webpack-cli -g
或者缩写：
npm i webpack webpack-cli -g

局部安装（在项目路径安装）（安装模板并保存到package.json的devDependencies）：

npm install webpack webpack-cli --save-dev
或者缩写：
npm i webpack webpack-cli -D

推荐：全局安装之后还是要在项目中局部安装，原因是：可防止不同项目依赖不同版本的 Webpack 而导致冲突。

使用webpack

1、打包js和json文件

现在在webpack2根目录下，新建两个文件夹

一个是src：源码文件夹，

一个是dist：打包之后的文件夹，装的都是打包后的文件

在这里插入图片描述
2、在src文件夹里面新建一个js文件夹，在里面建立入口js文件index.js和我们想要打包的js文件（mathUtils.js）

mathUtils.js代码如下

//.新建 mathUtils.js，用 CommonJs 规范导出
function add(num1,num2) {
 return num1+num2
}
function mul(num1,num2) {
 return num1*num2
}
module.exports = {
 add,mul
}

index.js代码如下

//新建入口 js 文件： index.js：导入 mathUtil.js 文件，并调用
const {add,mul} = require("./mathUtils.js")
console.log(add(10,20))
console.log(mul(10,10))

3、开始打包：

webpack ./src/js/index.js -o ./dist

在这里插入图片描述
这里出现一个警告：是没有设置，是因为
使用webpack没有指定mode为 development（开发模式）或者为production（生产模式）
使用下面的代码运行就不会有这个警告了：

webpack ./src/js/index.js -o ./dist --mode=production

上面的命令会：编译 index.js 文件并自动生成main.js 文件，webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 main.js 文件中。

4、查看效果
在dist文件夹里面新建一个html文件。

index.html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

运行，结果如下：
在这里插入图片描述

拓展：
1、我们还可以在 src 中生成一个 data.json 文件

data.json代码如下：

data.json
{
	"name": "前端",
	"age": "18",
	"height": "150"
}

2、在入口js文件 index.js 中导入并打印一下：

index.js代码如下：

import data from './data.json'
console.log(data);

3、重新打包一下，

webpack ./src/js/index.js -o ./dist --mode=production

4、运行dist文件夹里面的index.html
在这里插入图片描述

webpack配置

如果每次都用webpack命令自己写入口文件和出口文件会很麻烦，此时我们可以使用webpack的配置。

在项目根目录下建立一个配置文件 webpack.config.js

webpack.config.js

//1.导入 node 的 path 包获取绝对路径，需要使用 npm init 初始化 node 包
const path = require('path')
//2.配置 webpack 的入口和出口
module.exports = {
	entry: './src/index.js', //入口文件
	output: {
		path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve 拼接路径
		filename: 'main.js' //打包后的文件名
	},
	mode: 'production'
}

这样配置完成，就不用像之前那样输入一大串打包了，直接输入webpack即可。

webpack

在这里插入图片描述

虽然输入webpack已经很简便了，但是不符合我们的使用习惯，我们一般使用的是：

npm run dev      //开发环境
npm run build    //生产环境

只要在 package.json 中的 scripts 中加上 “build”: “webpack” 即可。

package.json

{
	"name": "webpack2",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack"
	},
	"author": "",
	"license": "ISC",
	"devDependencies": {
		"webpack": "^5.64.3",
		"webpack-cli": "^4.9.1"
	}
}

现在我们使用 npm run build 也可以打包了
在这里插入图片描述

加载 CSS

Webpack 本身只能处理 JavaScript 模块，我们的网页里面肯定不是只有JavaScript模块，所以如果要处理其他类型的文件，就需要使用 loader 进行转换。

如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader。
css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们。
style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

1、安装css-loader和style-loader

npm install --save-dev style-loader css-loader

2、安装完成之后需要配置 webpack.config.js 文件

webpack.config.js添加的代码如下：

module.exports = {
	module: {
		rules: [{
			test: /\.css$/, //正则表达式匹配 css 文件
			//css-loader 只负责 css 文件加载，不负责解析，要解析需要使用 style-loader
			use: [{
				loader: 'style-loader'
			}, {
				loader: 'css-loader'
			}] //使用 loader
		}]
	},
}

3、我们现在可以写css测试一下：
我们在src文件夹中新建一个css文件夹，并在css里面新建normal.css

normal.css 代码如下：

body {
	background-color: #f00;
}

打包，运行结果如下：
在这里插入图片描述

加载 less

1、安装less-loader

npm install --save-dev less-loader

2、安装完成之后需要配置 webpack.config.js 文件

webpack.config.js添加的代码如下：

module.exports = {
	module: {
		rules: [{
				test: /\.less$/, //正则表达式匹配 less 文件
				//css-loader 只负责 css 文件加载，不负责解析，要解析需要使用 style-loader
				use: [{
					loader: 'style-loader'
				}, {
					loader: 'css-loader'
				}, {
					loader: 'less-loader'
				}, ] //使用 loader
			},
			] //使用 loader
		}]
	},
}

3、我们现在可以写less测试一下：
在css文件夹里面新建special.less

special.less 代码如下：

@fontSize:50px;//定义变量字体大小
@fontColor:orange;//定义变量字体颜色
body{
 font-size: @fontSize;
 color: @fontColor;
}

打包，运行结果如下：
在这里插入图片描述

加载图片

这次我们可以使用内置方法，直接在配置文件 webpack.config.js中配置即可：

webpack.config.js添加的代码如下：

module.exports = {
	module: {
		rules: [{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset/resource',
				generator: {
					filename: 'images/[hash][ext][query]'
				} //把打包的图片放到 images 文件夹
			}
		]
	},
}

之后我们测试一下：将 normal.css 文件中使用图片作为背景：

body {
	background: url(../img/big.jpg) no-repeat fixed center;
}

打包并查看结果：在这里插入图片描述

在这里插入图片描述

打包整个html页面

我们的东西都是放在html页面里的，所以我们需要对html进行打包
1、安装loader

npm install –save-dev html-webpack-plugin

2、要在配置文件 webpack.config.js中配置

webpack.config.js添加的代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	plugins: [new HtmlWebpackPlugin({
		template: './src/index.html' //没有 template 则没有 body 中的结构
	})],
}

我们可以打包一下html，尝试一下,在此之前，我们先将dist文件夹删除。
在src文件夹中新建一个index.html

index.html代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script defer src="main.js"></script></head>
	<body>
		<h2>web前端</h2>
	</body>
</html>

打包HTML的图片

我们来修改src里面的index.html代码，我们现在想引入一张图片。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>web前端</h2>
		<img src="img/1.jpg" >
	</body>
</html>

这时候我们去打包就会发现出现问题了，可以打包成功但是图片没有显示出来。网页一直在加载。
在这里插入图片描述解决办法：是因为我们没有安装 html-loader

安装 html-loader：

npm install –save-dev html-loader

安装完成之后还需要在 webpack.config.js中配置：

webpack.config.js添加的代码如下：

module.exports = {
	module: {
		rules: [{
				test: /\.html$/i,
				loader: "html-loader",
				}
		]
	},
}

将dist文件夹删除（避免一些乱七八糟的错误），重新打包运行查看结果：
在这里插入图片描述打包HTML里面的字体

1、引入字体文件和css文件：
在这里插入图片描述 2、在html页面中引入：

index.html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="5a1a00c2f99d9a4eca09.css"/>
	<script defer src="main.js"></script></head>
	<body>
		<span class="iconfont icon-dianzan"></span>
		<h2>web前端</h2>
		<img src="images/c59d7a6b16b1d6ac4936.jpg" >
	</body>
</html>

还要在index.js 里面引入一下

index.js代码如下

require('../css/iconfont.css')

webpack.config.js代码添加配置如下：

module.exports = {
	module: {
		rules: [{
				test: /\.(woff|woff2|eot|ttf|otf)$/i,
				type: 'asset/resource',
				generator: {
					filename: 'fonts/[hash][ext][query]' //把打包的字体放到 fonts 文件夹
				}
			}
		]
	},
}

devServer

devServer（开发服务器）：用来自动化，不用每次修改后都重新输入 webpack
打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）
webpack-dev-server 为你提供了一个简单的 web server，并且具有 live
reloading(实时重新加载) 功能。

安装devServer

npm install webpack-dev-server --save-dev

webpack.config.js 文件配置代码如下：

module.exports = {
	devServer: {
		compress: true, // 启动 gzip 压缩
		port: 3000, // 端口号
		open: true, // 自动打开浏览器
		hot: true
	}
}

启动 devServer 指令为：

npx webpack-dev-server

我的发量超多

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫