有时候，您不需要Angular或React这样的框架来演示JavaScript中的思想或概念。例如，您只需要一个与框架无关的纯JavaScript开发环境来处理诸如web工作者、服务工作者、新JavaScript构造或IndexedDB之类的东西。在这篇博文中，您将学习如何使用webpack4快速原型化纯JavaScript应用程序，以创建这样一个零配置和低开发开销的环境。Webpack是一个领先的用于前端应用程序的静态模块绑定器。它被createreact app等工具用来快速构建前端项目。根据webpack文档，自4.0.0版本起，webpack不需要配置文件来绑定项目；但是，模块绑定器仍然具有高度可配置性，以满足项目不断增加的复杂性。"有了webpack 4 zero config，您就可以不再纠结于如何快速开发JavaScript应用程序了，并且可以避免在JavaScript足够的情况下，使用框架过度设计概念的快速证明。"在推特上留言您可以在GitHub上的webpack原型repo上找到这个练习的最终版本。不过，我鼓励你继续阅读并逐步构建webpack应用程序原型，以便更好地理解webpack为你带来的繁重任务。正在设置零配置Web包4去你的终端，把你想要存储学习项目的目录作为你当前的工作目录。然后，创建一个名为webpack prototype的文件夹，并将其作为当前工作目录。您可以使用以下命令轻松完成此操作：mkdir webpack原型和cd webpack原型这一行命令创建webpack原型目录，淘客猪，然后使其成为当前工作目录。在那里，创建一个新的NPM项目，并在本地安装webpack和webpack cli：npm初始-ynpm install webpack webpack cli—保存开发webpack cli是用于在命令行上运行webpack的工具。接下来，在此目录下创建一个简单的文件结构，如下所示：网页包原型|- 包.json|-/距离|- 索引.html|-/src公司|- 索引.js包.json在您创建NPM项目时已经提供给您。默认情况下，webpack4将查找src/索引.js要用作入口点的文件。入口点告诉webpack应该使用哪个模块开始构建其内部依赖关系图。从这个模块中，webpack可以推断出应用程序所依赖的其他模块或库，并将它们包含在捆绑包中。来源另外，webpack使用dist/索引.html作为应用程序的默认主HTML文件，生成的包将自动注入其中。因此，src目录保存所有应用程序源代码（您将从头创建、编写、删除、编辑等代码）。dist目录是应用程序的分发目录。此目录包含已被webpack最小化和优化的代码。本质上，dist目录保存web包输出，一旦应用程序运行，这些输出将加载到浏览器中。可以通过发出以下命令快速创建这些文件：macOS/Linux系统：mkdir src dist和touch dist/索引.htmlsrc公司/索引.js窗户：mkdir src dist&&echo.>距离/索引.html&&回音。>src/索引.jsmkdir用于跨操作系统创建目录。但是，touch只在Unix和类Unix的操作系统中可用。echo是一种相当于触摸的Windows。回音。创建一个包含一个空行的文件。在首选的IDE或代码编辑器中打开项目。你可以运行代码。或者网络风暴。打开当前工作目录（如果已安装Visual Studio代码或WebStorm的命令行工具）。给我点活力/索引.html通过添加以下代码：在在在在标记中，加载一个主.js通过别担心。主.js一旦webpack创建了您的项目包，它将自动为您创建。作为预防措施，为了防止意外地将代码发布到NPM，请打开包.json并执行以下操作：添加"private"：是的，作为属性。删除"main"：索引.js"，行。包.json应该是这样的：{"name"："网页包原型"，"version"："1.0.0"，"说明"：""，"私人"：是的，"脚本"：{"test"："echo\"错误：未指定测试\"&&exit 1"},"关键字"：[]，"作者"：""，"license"："ISC"，"开发依赖性"：{"webpack"："^4.25.1"，"webpack cli"："^3.1.2"}}现在，给src一些生命/索引.js. 现在，在屏幕上添加一条简单的消息：//src公司/索引.jsconst createElement=消息=>{常量元素=文档.createElement（"div"）；element.innerHTML=消息；返回元件；};document.body.appendChild（createElement（"Webpack lives."））；最后，为了测试所有东西是否按预期工作，您需要创建一个bundle。这可以通过发出以下命令来完成：npx网页包使用npx，您可以模拟webpack的全局安装的相同行为，但是没有实际的全局安装。npx使用您先前安装的webpack的本地版本。如果您的系统中安装了npm>=5.2，hadoop大数据，则可以使用npx。但是，从命令行运行这个命令效率不高或太令人难忘。更好的方法是在包.json它的功能与npx webpack相同：{"name"："网页包原型"，"version"："1.0.0"，"说明"：""，"私人"：是的，"脚本"：{"test"："echo\"错误：未指定测试\"&&exit 1"，"build"："webpack"},"关键字"：[]，"作者"：""，什么是物联网，"license"："ISC"，"开发依赖性"：{"webpack"："^4.25.1"，物联网展，"webpack cli"："^3.1.2"}}现在，您可以运行npm run build，这是JavaScript开发人员更熟悉的命令。运行webpack可以执行以下操作：使用src/索引.js作为切入点。生成距离/主.js作为webpack输出。请注意，在构建应用程序时会出现一个警告：配置中的警告。尚未设置"模式"选项。你很快就会在这篇博文中了解到这一点。通过执行以下操作验证捆绑包是否已正确创建：打开dist目录。你看到了吗主.js文件在那里？如果是，输出有效。如果你好奇的话，敞开心扉主.js. 请注意，该文件由高度最小化的一行JavaScript代码组成。开放距离/索引.html在浏览器中。你应该看看网页包的生活。印刷在屏幕上。打开距离/索引.html，通过文件系统找到该文件并双击它。然后，您的默认浏览器应打开该文件。更改src中的消息字符串/索引.js至以下地址：//src公司/索引.jsconst createElement=消息=>{常量元素=文档.createElement（"div"）；element.innerHTML=消息；返回元件；};document.body.appendChild(createElement（"Webpack生活在对开源的热爱之中。"）);重新加载浏览器选项卡演示索引.html. 请注意，打印的消息没有更改。为了改变它，你需要更新你的输出包。为此，您需要再次执行npm run build来重新创建捆绑包，然后刷新页面。运行命令并刷新页面。Webpack生活在对开源的热爱中。现在应该显示在屏幕上。这不是最佳选择。您需要的是热模块替换，以便在应用程序运行时交换、添加或删除模块，而不需要完全重新加载。作为开发人员，启用热模块替换有什么好处？在完全重新加载期间，应用程序的状态将丢失。州人力资源管理允许你保留你的应用。通过只更新应用程序中的更改，开心返利，您可以节省时间。源CSS和JavaScript文件中的更改会在浏览器中即时显示，这与直接通过浏览器的开发工具完成的更新非常相似。要启用人力资源管理，请执行以下步骤：安装webpack dev server，它为您提供一个简单的web服务器，能够实时重新加载应用程序：npm install webpack dev server--保存开发创建开始：dev NPM在中编写脚本包.json:{"name"："网页包原型"，"version"："1.0.0"，"说明"：""，"私人"：是的，"脚本"：{"test"："echo\"错误：未指定测试\"&&exit 1"，"build"："网页包"，"开始：dev":"Web包开发服务器--模式开发--内容库分布/--打开--热"},"关键字"：[]，"作者"：""，"license"："ISC"，"开发依赖性"：{"webpack"："^4.25.1"，"webpack cli"："^3.1.2"，"Web包开发服务器"："^3.1.10"}}那个开始：dev NPM剧本是一口。它在干什么？{// ..."脚本"：{// ..."开始：dev":"Web包开发服务器--模式开发--内容库分布/--打开--热"}// ...}webpack dev server：运行webpack dev server。--模式开发：模式配置选项告诉webpack相应地使用其内置优化。与生产相比，开发产生的输出更具可读性。如果不使用此选项，则默认选项为"生产"。也可以将其设置为none，这将禁用任何默认行为。在这里了解更多关于网页包开发和生产模式之间的区别。--content base dist/：告诉dev服务器从哪里提供静态内容。默认情况下，webpack dev server将为当前目录中的文件提供服务。但是，在本例中，您希望从dist/where您的索引.html文件是。--打开：在系统默认浏览器中打开默认应用程序url。在这里，它是：8080/。--hot：通过添加HotModuleReplacementPlugin并将服务器切换到热模式来启用热模块替换。运行Web包开发服务器：npm运行开始：dev你的de