webpack代码打包压缩
什么是Webpack？
Webpack是JavaScript和HTML应用程序的模块捆绑器。 它抓取在文件夹中分隔的模块化代码段。 随后将它们重构为编译形式。 然后，应用程序将其整体读取。 您必须在想：“为什么要破坏有效的代码？” 随着代码的扩展，其复杂性也会随之增加。 在每个块之间找到相关性成为一个挑战。
因此，Webpack被认为具有以下优点：
- 关注点分离-代码可以按功能（即逻辑，DOM）划分。
- 拆分JS文件可以加载单独的文件，而不是在首页命中时加载整个文件。
- 将Babel从ES6移植到ES5，而无需担心是否支持较旧的浏览器。
- 重新运行捆绑，因为它会检测到已保存的更改。 处理模块更换和/或更改。
就是说，弄清楚打包内容对于初学者来说可能是艰巨的。 从Webpack开始就像一天的移动。 尤其要确定要分类，包装和以何种顺序包装的物品。 盘子和碗必须作为易碎物品装在装有泡沫的盒子中，并放在最上面的一堆上以防止破裂。 书和杂志可以从下往上堆放在盒子中，因为它们可以承受最大的重量。 经验法则是不要将不同类别的项目混入一个盒子中。 否则，您将难以跟踪特定事物的下落。 同样，先解开书本而不先解开书架会很不方便。
本文假定读者具有Webpack设置的先验知识。 并用作分割JS文件的指南。 否则，请在此处和此处查看教程。
根据您的JS应用程序，您可以按功能拆分文件。 就我而言，“ 待办事项”应用程序分为以下几种方式：
- 事件监听器-单击按钮会将用户输入发送到后端
- 用户输入-从用户那里收到的数据
- 控制-应用逻辑DOM-HTML输出
- 入门-默认条目
- 构造函数-用于新对象
- 本地存储-存储新条目和编辑条目
下图显示了JS文件除以关注点。 当新的眼睛试图解释代码或遵循路径时，它消除了混乱。
下面的流程图说明了函数的调用流程；
在上方，您将看到从开始函数到最后一个函数的线性，因为拆分文件的线性也应类似。 分割文件后，下一位是将其导出并导入为模块。 分割从结尾开始到开头，而不是从中间开始，以免丢失曲目。
对于最后一个文件夹中的单独功能，请使用导出和导入默认方法，如下所示；
./src/DOM/TaskDOM.jsexport default function renderTaskCard () {
.
.
}
.src/control/taskControl.jsimport renderTaskCard from '../DOM/taskDOM' ;
.
.
Eslint允许使用ES5导出功能。 而ES6的“ export default renderTaskCard（）{...。 ”显示为棉绒，没有定义的var错误，因为未将renderTaskCard（）分配给变量。
下图说明了几种功能的导出和导入；
.src/DOM/taskDOM.jsexport const renderTaskCard = () => {
.
.
}
export const closeTaskForm = () => {
.
.
}
import { renderTaskCard, closeTaskForm } from '../DOM/taskDOM' ;
.
.
函数名称用大括号括起来，作为函数导入的声明。 但是我们怎么知道需要什么进出口呢？ 轻松确定正在调用的函数。
.src/control/taskControl.jsimport { renderTaskCard, closeTaskForm } from '../DOM/taskDOM' ;
export const addTaskToProject = ( .. ) => {
.
.
.
renderTaskCard(..);
closeTaskForm();
}
};
renderTaskCard和closeTaskForm正在从addTaskToProject在taskControl调用。 因此，通过声明taskDOM中两个函数的导入来挂钩它们。
然后在下面的收件人文件中导出函数；
./src/DOM/taskDOMexport const renderTaskCard = () => {
.
.
}
export const closeTaskForm = () => {
.
.
}
导入和导出的工作一直进行到所有事件侦听器都存放在index.js为止。
综上所述;
- 按功能或功能类型拆分文件。
- 在调用函数的地方，必须声明目标函数的导入。
- 然后导出目标函数以进行文件链接和捆绑。
翻译自: https://hackernoon.com/how-to-pack-javascript-code-with-webpack-hn4y3y1g
webpack代码打包压缩
