前言从本质上讲，webpack是现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包到一个或多个包中。这是官网对webpack的解释。说到模块，模块顾名思义就是独立的JS文件。相似词模块化，通俗地说，就是对我们常用的组织和管理代码的方法的一种实现。开战前，我们先测试下webpack的打包。1.初始化并创建工程目录mkdirwebpackmini2.安装webpack依赖yarnaddwebpack-Dornpminstallwebpack-D3。安装webpack-cli依赖这里，稍微注意一下，我们可以下载这个版本，安装后最新版本貌似不可用。yarnaddwebpack-cli@3.3.12-Dornpminstallwebpack@3.3.12-D创建入口文件1.创建项目主目录mkdirsrc2.创建入口文件touchmain.js3.编辑入口文件我们这里使用最简单的一行代码。console.log('maomin1');创建和编辑webpack配置文件在项目根目录下输入命令：touchwebpack.config.js并编辑。constpath=require('path');module.exports={mode:'development',entry:'./src/main.js',output:{path:path.resolve(__dirname,'dist'),文件名：'bundle.min.js'}}运行测试包我们这里使用npxwebpack命令进行打包。打包成功！当我们来到打包好的bundle.min.js文件时，我们会看到如下代码："调用在浏览器开发工具中创建一个单独的源文件。*如果你正在尝试读取输出文件，请选择不同的开发工具（https://webpack.js.org/configuration/devtool/）*或使用“devtool:false”禁用默认开发工具。*如果你正在寻找生产就绪的输出文件，orgseetion.js（https://“product/configuration/mode/).*//******/(()=>{//webpackBootstrap/******/var__webpack_modules__=({/***/"./src/main.js":/*!********************!*\!***./src/main.js***!\*********************//***/(()=>{eval("console.log('maomin1');\n\n//#sourceURL=webpack://webpackmini/./src/main.js?");/***/})/******/});/******************************************************************************//******//******///启动/******///Loadentrymoduleandreturnexports/******///Thisentrymodulecan'tbeinlinedbecausetheevaldevtoolisused./******/var__webpack_exports__={};/******/__webpack_modules__["./src/main.js"]();/******//******/})();我们把评论删了之后，就精简多了！(()=>{var__webpack_modules__=({"./src/main.js":(()=>{eval("console.log('maomin1');\n\n//#sourceURL=webpack://webpackmini/./src/main.js?");})});var__webpack_exports__={};__webpack_modules__["./src/main.js"]();})();准备实战，实现一个基础版的webpack1。在项目根目录下创建一个文件夹。mkdirmaominpack2.然后，在maominpack文件夹下新建一个bin文件夹mkdirbin3。最后在bin文件夹下新建maominpack.js文件，编辑如下：#!/usr/bin/envnodeconstfs=require('fs');constejs=require('ejs');constconfig=require('../../webpack.config.js');constentry=config.entry;constoutput=`${config.output.path}\/${config.output.filename}`;constcontent=fs.readFileSync(entry,'utf8');lettemplate=`(()=>{var__webpack_modules__=({"<%-entry%>":(()=>{eval("<%-content%>");})});var__webpack_exports__={};__webpack_modules__["<%-entry%>"]();})();`letpackage=ejs.render(template,{entry,content});fs.writeFileSync(输出,包);首先我们在header中指定环境为node环境，导入fs模块。然后，我们引入了ejs依赖。如果对ejs不是很了解，可以去官网浏览一下。这里简单介绍一下。“E”代表什么？它可能意味着“嵌入式”，也可能意味着“有效”、“优雅”或“简单”。EJS是一种简单的模板语言，可帮助您使用普通的JavaScript代码生成HTML页面。EJS没有关于如何组织内容的教条；它不会重新发明一套迭代和控制流语法；它只是普通的JavaScript代码。我们看到，在给模板变量赋一个绑定值的字符串时，我们在这里使用了ejs.render()。第一个参数是要处理的字符串，第二个参数是我们需要修改的值。是一个对象。4.编辑package.json文件如下：{"name":"maominpack","version":"1.0.0","bin":{"maominpack":"bin/maominpack.js"},"main":"index.js","license":"麻省理工学院"}5。为其命令npmlink6创建一个快捷方式。在其他目录下配置，使用这个命令npmconfigls7。验证包并修改src/main.js。console.log('毛民2');然后，键入命令：maominpack最后，检查bundle.min.js:(()=>{var__webpack_modules__=({"./src/main.js":(()=>{eval("console.log('maomin2');");})});var__webpack_exports__={};__webpack_modules__["./src/main.js"]();})();找到了，我们打包成功了。这里我们只是实现了最基本的字符串替换打包功能，webpack还有很多值得玩的功能。
