本质上，webpack 是一个现代 Javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
这是官网对webpack的解释。提到模块，模块顾名思义是独立的JS文件。与之相近的词模块化，通俗地讲就是我们平时组织和管理代码方法的一种实现。
战前准备我们先来测试一下webpack的打包。
1.初始化创建项目目录
mkdir webpackmini 2.安装webpack依赖
yarn add webpack -D or
npm install webpack -D 3.安装webpack-cli依赖 这里，稍微注意一下，我们可以下载这个版本的，最新版的安装之后好像不可用。
yarn add webpack-cli@3.3.12 -D or
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文件，会看到以下代码：
(() => { // webpackBootstrap var __webpack_modules__ = ({ "./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 nodeconst 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__ = ({ "<%-entry%>": (() => { eval("<%-content%>"); }) }); var __webpack_exports__ = {}; __webpack_modules__["<%-entry%>"](); })() ; `let package = ejs.render(template,{ entry, content}); fs.writeFileSync(output,package); 首先，我们在头部指定环境为node环境，并且引入fs模块。然后，我们引入了ejs依赖，如果不是很了解ejs的，可以去官网浏览下。这里就简单的介绍一下。
“E” 代表什么?可以表示 “可嵌入(Embedded)”，也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。EJS 是一套简单的模板语言，帮你利用普通的 Javascript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 Javascript 代码而已。我们看到在将带有绑定值的字符串赋值给template变量，我们这里使用的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还有很多值得玩的特性。
