webpack 入门教程

最新推荐文章于 2022-12-14 09:26:13 发布

一拖再拖一拖再拖

最新推荐文章于 2022-12-14 09:26:13 发布

阅读量171

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_41974199/article/details/108616597

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack 入门教程

文章目录

webpack 入门教程

在这里插入图片描述

1：webpack 是什么

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。
Webpack可以从终端、或是更改 webpack.config.js 来设置各项功能。
要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用加载器来将资源转化成模块。开发者可以自定义加载器的顺序、格式来因应项目的需求。 --维基百科

2：webpack 优点和缺点

webpack 的优点：

淘汰固定数据：对于CSS规则。您只需将图像和CSS构建到dist/应用程序实际需要的文件夹中。
简化代码拆分。
控制数据的处理方式：如果图像小于特定大小，则可以将base64直接编码为Javascript，以减少HTTP请求。
稳定的生产部署

webpack 的缺点：

文档不详细
配置 webpack 文件
迷你语言：require("!style!css!less!bootstrap/less/bootstrap.less");
源代码视图

3：webpack 安装

要使用 Webpack 前须先安装 Node.js

初始化项目：


node init

在这里插入图片描述

全局安装 webpack 和 webpack-cli ：


npm i webpack webpack-cli -g

当前目录安装 webpack 和 webpack-cli ：


npm i webpack webpack-cli -D

查看 webpack 版本号：


webpack -v

4：新建 index.less，index.js，index.html

新建三个文件，分别为 index.less，index.js 和 index.html ：

这里为什么使用 index.less 文件？
浏览器无法识别样式 less 的文件。 webpack的功能是将 less 的文件构造和打包成浏览器可以识别的样式文件。

index.less 清单：

h1{
	color: red;
}

index.js 清单：


import './index.less';

index.html 清单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack</title>
	</head>
	<body>
		<h1>HELLO WORLD</h1>
	</body>
</html>

5：新建 webpack 配置文件

新建 webpack.config.js 文件：


// 文件绝对路径
var path = require('path');

module.exports = {

	// 打包方式
	// development：测试打包
	// production：正式打包
	// 区别：测试打包有注释内容；正式打包代码打包成一行且没有注释。
	mode: 'development',

	// 入口文件
	entry: './index.js',

	// 构建打包后的文件输出路径及名称
	output: {

		// 路径
		path: path.resolve(__dirname, 'dist'),

		//名称
		filename: 'build.js'
	},
	module: {

		// 使用loader
		rules: [{

				// 使用正则过滤所有 .less 结尾的文件
				test: /\.less$/,

				// less-loader：将 less 文件打包成 css 文件。
				use: ['style-loader', 'css-loader', 'less-loader'],
			},
			{

				// 使用正则过滤所有 .css 结尾的文件
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},

	// 使用到的插件
	plugins: []
}

为了便于理解，配置文件全部打上备注了。

不过这里需要注意：loader 的执行顺序是 从下往上 或 从右往左 依次执行的。

使用 loader 需要先下载相关 loader：


npm i less less-loader css-loader style-loader -D

执行 webpack：


webpack

输出内容：

Hash: 3b309f7e9b7511820724
Version: webpack 4.44.1
Time: 540ms
Built at: 2020/09/16 上午11:32:05
   Asset    Size  Chunks             Chunk Names
build.js  17 KiB    main  [emitted]  main
Entrypoint main = build.js
[./index.js] 21 bytes {main} [built]
[./index.less] 557 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./index.less] 315 bytes {main} [built]
    + 2 hidden modules

如果没有错误，则构建打包完成。

我们可以发现当前目录出现一个新的文件夹 dist。其中 build.js 就是我们打包完成的文件。

index.html 文件引入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack</title>
	</head>
	<body>
		<h1>HELLO WORLD</h1>
		<script type="text/javascript" src="dist/build.js"></script>
	</body>
</html>