webpack支持模块定义方式（初识webpack模块打包工具）
webpack支持模块定义方式（初识webpack模块打包工具）在webpack-demo文件夹下创建一个 dist文件、dist/index.html、src文件、src/index.js。目录结构如下图:基本的安装工作都已经完成了。接着我在本地电脑H盘手动创建了webpack-demo文件夹，然后在webpack-demo文件夹使用npm命令初始化了一个package.json文件。创建package.json命令:cmd进入webpack-demo文件之后使用npm init命令生成package.json。接着还是在cmd webpack-demo文件夹中使用npm来安装webpack需要依赖的模块，(本地)安装webpack命令：npm install --save-dev webpack
webpack工具是现代JavaScript构建脚本资源模块的打包器。当使用webpack构建资源时，它会递归的构建一个依赖关系图，将所有需要打包的脚本资源集成少量的文件资源，最终由浏览器加载其打包好的文件资源。
webpack有四个核心概念：入口（entry）、出口（output）、加载器（loader）、插件（plugins）。
入口（entry）:首先要明确将哪些js、css、png、font等资源文件打包成自己想要资源文件，也就指的是原文件。要不然的话webpack怎么知道哪些文件需要打包呢？
node.js是自带了一个npm工具的，查看npm版本命令:npm -v。
接着我在本地电脑H盘手动创建了webpack-demo文件夹，然后在webpack-demo文件夹使用npm命令初始化了一个package.json文件。
创建package.json命令:cmd进入webpack-demo文件之后使用npm init命令生成package.json。
接着还是在cmd webpack-demo文件夹中使用npm来安装webpack需要依赖的模块，(本地)安装webpack命令：npm install --save-dev webpack
基本的安装工作都已经完成了。
在webpack-demo文件夹下创建一个 dist文件、dist/index.html、src文件、src/index.js。目录结构如下图:
index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--由webpack 生成的bundle.js-->
<script type="text/javascript" src="https://img.aigexing.combundle.js" ></script>
</body>
</html>
index.js 文件
function component() {
var element = document.createElement('div');
element.innerHTML = "Hello World";
return element;
}
document.body.appendChild(component());
使用命令：webpack src\index.js dist\bundle.js 打包，将index.js打包到dist\bundle.js
dist文件夹生成了一个bundle.js
在打开index.html页面看看是不是打印了Hello World？
这里我想说的是，webpack可以将多个入口资源文件打包成一个文件，然后有页面去引用·。
可能大家也有很多疑问？package.json是什么？webpack可以简化命令打包吗？后面慢慢的掀开webpack的神秘面纱。
如有疑问，可在下面进行评论！
