序言
其本质上，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–D
or
npm install -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 webpackmodules =({/***/”./src/main.js”:/*!*********************!*\!***./src/main.js ***!\*********************//***/(()=>{ eval(“console.log(maomin1);\n\n//# sourceURL=webpack://webpackmini/./src/main.js?”);/***/})/******/});/************************************************************************//******//******/// startup /******/// Load entry module and return exports /******/// This entry module cant be inlined because the eval devtool is used./******/ var webpackexports ={};/******/ webpackmodules[“./src/main.js”]();/******//******/})();
他们将注释删掉后，会精简不少!
(()=>{ var webpackmodules =({“./src/main.js”:(()=>{eval(“console.log(maomin1);\n\n//# sourceURL=webpack://webpackmini/./src/main.js?”);})}); var webpackexports ={}; webpackmodules[“./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 webpackmodules =({“<%-entry%>”:(()=>{ eval(“<%-content%>”);})}); var webpackexports ={}; webpackmodules[“<%-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 webpackmodules =({“./src/main.js”:(()=>{ eval(“console.log(maomin2);”);})}); var webpackexports ={}; webpackmodules[“./src/main.js”]();})();
发现，他们装箱成功了。这儿他们只是同时实现了最此基础的字符串替换装箱功能，webpack还有很多值得玩的特性。
