Webpack是什么？Webpack有什么应用？

最新推荐文章于 2023-02-16 17:31:43 发布

依然黄庭Y

最新推荐文章于 2023-02-16 17:31:43 发布

阅读量1.1k

点赞数

分类专栏： Webpack 文章标签： Webpack 前端打包工具前端开发

本文链接：https://blog.csdn.net/weixin_41672178/article/details/88358303

版权

Webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webpack是什么？

Webpack核心定义——Webpack是一个模块打包工具。最早的时候，Webpack是一个JS打包工具，现在Webpack功能日益强大，除了JS还可以打包CSS或者图片等多种文件。

如何安装Webpack4？

（1）安装NodeJS
（2）在桌面添加并进入webpack-demo文件夹，右键打开git bash，npm有时不起作用，这里用的是cnpm 需要额外安装，输入

cnpm init

把该填的填完，不想填也可以一路回车，或者使用命令

cnpm init -y

打开Atom编辑器，暂时把packjage.json修改成下面这样。因为这是个私有的包，所以删除"main"跟"keyword"部分，暂时删除script里面的内容。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {},
  "author": "HTY",
  "license": "ISC"
}

初始化完还是git bash，继续输入

cnpm install webpack webpack-cli --save-dev

或者

cnpm install webpack webpack-cli -D

这里一定要安装webpack-cli，不然无法使用webpack命令。
查看Webpack版本

npx webpack -v

Webpack初尝试

commonJS模块引入规范

在webpack-demoj建立一个index.html，一个src目录，src目录里面写三个4个文件，目录结构如下

webpack-demo
- index.html
- header.js
- content.js
- sidebar.js
- index.js

这里使用了CommonJS模块打包规范，通过module.exports导出模块，require的方式引入模块。

// 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.js文件
var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');

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

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

此时如果直接引入src目录下的index.js会报错。浏览器无法识别这样的模块引入方式。
require is not define
这个时候就要用到webpack，右键打开git bash,输入

npx webpack index.js

打包完成后，发现webpack出现了一个dist文件夹，里面含有main.js文件
此时，我们修改index.html中script标签里面的内容。

<script src='./dist/main.js'></script>

再打开index.html文件，没有报错并且三个JS文件的内容都被成功引入。
在这里插入图片描述
综上所述，Webpack就是一个模块打包工具，把各种模块打包在一起。Webpack支持大部分模块规范，包括ES Module模块引入规范，commonJS规范等等。

依然黄庭Y

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Webpack是什么？Webpack有什么应用？

Webpack是什么？最早的时候，Webpack是一个JS打包工具，现在Webpack功能日益强大，可以打包CSS或者图片等文件。如何安装Webpack4？（1）安装NodeJS（2）在桌面添加并进入webpack-demo文件夹，右键打开git bash，npm有时不起作用，这里用的是cnpm 需要额外安装，输入cnpm init把该填的填完，不想填也可以一路回车，或者使用命令c...
复制链接

扫一扫