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

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

依然黄庭Y

1164人浏览 · 2019-03-08 21:29:15

依然黄庭Y · 2019-03-08 21:29:15 发布

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>