前言
本质上，webpack 是现代 JavaScript 应用程序的静态模块捆绑器。 当 webpack 处理一个应用程序时，它会递归地构建一个包含应用程序所需的每个模块的依赖图（dependency graph），然后将所有这样的模块打包到一个或多个包中。
这是官网对webpack的解释。 说到模块，模块顾名思义就是独立的JS文件。 类似的词模块化webpack打包生成，通俗地讲，就是我们平时组织和管理代码的方式的一种实现。
战前计划
我们先来测试一下webpack的打包。
1.初始化
创建项目目录
mkdir webpackmini 2.安装webpack依赖
yarn add webpack -D 或者
npm install webpack -D 3、webpack-cli的安装就依赖这个，稍微注意一下，我们可以下载这个版本，安装后最新版本好像不能用。
yarn add webpack-cli@3.3.12 -D 或者
npm install webpack@3.3.12 -D 创建入口文件
1.创建项目主目录
mkdir src 
2.创建入口文件
touch main.js 3.编辑入口文件
我们在这里使用最简单的一行代码。
console.log('maomin1'); 创建和编辑 webpack 配置文件
在项目根目录下输入命令：
touch webpack.config.js 并编辑。
const path = require('path');
module.exports = {
mode:'development',
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.min.js'
}
} 
运行测试包
这里我们使用npx webpack命令进行打包。 打包成功！
当我们来到打包好的bundle.min.js文件中，我们会看到如下代码：
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/ /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/main.js":
/*!*********************!*
!*** ./src/main.js ***!
*********************/
/***/ (() => {
eval("console.log('maomin1');nn//# sourceURL=webpack://webpackmini/./src/main.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/main.js"]();
/******/
/******/
})() ; 删除评论后，就精简多了！
(() => {
var __webpack_modules__ = ({
"./src/main.js":
(() => {eval("console.log('maomin1');nn//# sourceURL=webpack://webpackmini/./src/main.js?");})
});
var __webpack_exports__ = {};
__webpack_modules__["./src/main.js"]();
})(); 做好实战准备
开始在实践中实现一个基本版本的webpack。
1、首先我们在项目根目录下创建一个文件夹。
mkdir maominpack 
2、之后在maominpack文件夹下创建bin文件夹
mkdir bin 3、最后在bin文件夹下创建maominpack.js文件
编辑如下：
#!/usr/bin/env node
const fs = require('fs'); const ejs = require('ejs');
const config = require('../../webpack.config.js');
const entry = config.entry;
const output = `${config.output.path}/${config.output.filename}`;
const content = fs.readFileSync(entry,'utf8');
let template = `
(() => {
var __webpack_modules__ = ({
"":
(() => {
eval("");
})
});
var __webpack_exports__ = {};
__webpack_modules__[""]();
})() ;
`
let package = ejs.render(template,{
entry,
content
});
fs.writeFileSync(output,package); 首先我们指定环境为腹部的节点环境，并导入fs模块。 然后webpack打包生成，我们引入了ejs依赖。 如果你不太了解ejs，可以去官网浏览一下。 这里简单介绍一下。
我们看到带有绑定值的字符串参数被赋予了模板变量。 这里我们使用的ejs.render()，第一个参数是要处理的字符串，第二个参数是我们需要改变的值。 是一个对象。
4. 编辑package.json文件，如下所示：
{
"name": "maominpack",
"version": "1.0.0",
"bin":{ "maominpack":"bin/maominpack.js" },
"main": "index.js", "license": "MIT"
} 5.为其命令创建快捷方法
npm link 6.该命令也可以在其他目录下进行配置
npm config ls 7. 验证包装
让我们稍微改变一下 src/main.js 。
console.log('maomin2'); 然后，键入命令：
maominpack 最后，检查bundle.min.js：
(() => {
var __webpack_modules__ = ({
"./src/main.js":
(() => {
eval("console.log('maomin2');");
})
});
var __webpack_exports__ = {};
__webpack_modules__["./src/main.js"]();
})()
; 发现我们打包成功了。 这里我们只是实现了最基本的字符串替换打包功能，webpack还有很多功能值得玩。
