如何使用 webpack --- 1

九州白

已于 2023-02-15 18:22:51 修改

阅读量224

点赞数

分类专栏：前端 js 文章标签： webpack 前端 javascript

于 2022-06-27 14:44:49 首次发布

本文链接：https://blog.csdn.net/qq_38783557/article/details/125482914

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

文章目录

- 如何使用 webpack --- 1

如何使用 webpack — 1

准备工作

确保电脑中已经安装 node，没安装的查看链接http://nodejs.cn/找适合自己的进行下载；

需要安装 live-server 插件，本文的示例是在 vs code 中运行的

建立空文件夹

mkdir webpack-demo
cd webpack-demo

安装 webpack 和 webpack-cli

npm init -y
npm install webpack webpack-cli --save-dev

当前的目录

初始目录

正式使用

不使用 webpack 时的操作

最外层添加 index.html 文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>first try</title>
	</head>
	<body>
		<script src="./index.js"></script>
	</body>
</html>

建立 src 文件夹

添加 index.js 文件

function component() {
	const dom = document.createElement("div")
	dom.innerHTML = "hello world"
	return dom
}

document.body.append(component())

此时打开浏览器会出现以下内容

浏览器-1

使用 webpack 时

修改 package.json

package.json修改内容

新增 webpack.config.js 文件

module.exports = {
	// 入口文件
	entry: "./src/index.js",
	// 输出文件
	output: {
		// 输出的文件名
		filename: "index.bundle.js",
	},
}

我们再修改 index.html 的位置和内容

index.html位置移动说明
index.html修改内容

打包前的目录

index.html移动后的目录

执行 npm run build

测试npm run build

再次打开浏览器

hello world

👌，打包后出现的内容和之前直接引用的是一样的，再进一步

添加 print.js

包含print.js代码

index.js 中进行修改

import printMe from "./print"
function component() {
	const dom = document.createElement("div")
	dom.innerHTML = "hello world"

	const button = document.createElement("button")
	button.innerText = "print"
	button.addEventListener("click", () => {
		printMe()
	})
	document.body.append(button)

	return dom
}

document.body.append(component())

重新打包，出现以下内容

浏览器出现print

点击 print，出现

打印print.js内容

添加 style.css

如果我们需要引入样式文件，要怎么办呢？

按之前的方式添加试试

添加css文件和对应的代码

导入css代码

结果报错了，别急，看看报的啥错，解析失败

css解析错误

为啥会解析失败呢？动动我们聪明的脑袋

webpack 默认是用来处理 js 文件的，无法解析 css，但我们可以通过 loader 解决这个问题

安装 style-loader，css-loader

npm i style-loader css-loader --save-dev

然后再 webpack.config.js 中配置对应的 loader

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "index.bundle.js",
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
			},
		],
	},
}

这里有个需要注意的地方，style-loader 和 css-loader 不能互换，官方给的说法是 loader 执行顺序是从右至左的，故而互换后会出现问题

执行 npm run build

导入样式后浏览器样式

这里我们可能会有一个问题，css 文件跑哪去了呢？看看打包后的目录

引入css

不在这里，那样式为什么还修改了呢？

我们看看控制台的 element

控制台element

会发现在 head 中多了 style 标签，对应的样式在这里

我们可以合理的猜测，css-loader 和 style-loader 实际上是把 css 转成 js 文件，这个 js 文件会添加 style 标签，把对应的 css 样式放入其中

如果想使用 sass 语言怎么办呢？

大家可以想想

10 9 8 7 6 5 4 3 2 1

好，这边提供一种思路

其实跟引入 css 是一样的，不过处理 sass 语言需要 sass-loader 和 sass

我们先下载

npm i sass-loader sass --save-dev

这里我想到之前在开发时遇到的问题，下的不是 sass，而是 node-sass，node-sass 坑比较多。这边建议下载 sass，官方建议的也是 sass

进行配置

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "index.bundle.js",
	},
	module: {
		rules: [
			{
				test: /\.(css|scss)$/i,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
		],
	},
}

修改文件名，修改引入名

css改成scss

import printMe from "./print"

import "./style.scss"

function component() {
	const dom = document.createElement("div")
	dom.innerHTML = ["hello world", `<span>i am webpack<span>`].join("\n")

	const button = document.createElement("button")
	button.innerText = "print"
	button.addEventListener("click", () => {
		printMe()
	})
	document.body.append(button)

	return dom
}

document.body.append(component())

button {
	background: #000;
}
div {
	white-space: pre-line;
	span {
		color: #008c8c;
	}
}

执行 npm run build

scss浏览器示例

添加图片和字体

跟 css 文件一样，webpack 内置的无法处理这些文件，我们需要引入对应的 loader，官方给出了另一种方式，看下配置

（字体和图片自己找一下，免费字体网站推荐：噪没网）

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "index.bundle.js",
	},
	module: {
		rules: [
			{
				test: /\.(css|scss)$/i,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
			{
				test: /\.(jpg|jpeg|svg|png|gif)$/i,
				type: "asset/resource",
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/i,
				type: "asset/resource",
			},
		],
	},
}

修改 style.scss 文件

@font-face {
  font-family: 'my-font';
  src: url('./myFont.otf');
}
$black:#000;
$green:#008c8c;
button {
	background: $black;
}
div {
	font-family: my-font;
	white-space: pre-line;
	span {
		color: $green;
	}
	img {
		width: 400px;
	}
}

最终成果

result2

我们会发现 dist 文件家里有很多之前遗留的不需要的文件

可以通过配置 webpack.config.js 来清理

修改output

然后 npm run build

浏览器报错

嗯？没找到 dist 目录下的 index.html，赶紧看看发生了什么

。。。。index.html 也被清理了

没有index.html的目录

别急

我们可以用一个插件把它还原出来，html-webpack-plugin

npm install  html-webpack-plugin --save-dev

配置 webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "index.bundle.js",
		clean: true,
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "learnWebpack",
		}),
	],
	module: {
		rules: [
			{
				test: /\.(css|scss)$/i,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
			{
				test: /\.(jpg|jpeg|svg|png|gif)$/i,
				type: "asset/resource",
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/i,
				type: "asset/resource",
			},
		],
	},
}