Article translated from source: https://hackernoon.com/how-to-pack-javascript-code-with-webpack-hn4y3y1g
What is Webpack?
Webpack is a module packed for JavaScript as well as HTML applications. It retrieves the module sections of the code arranged in directories. The next is to turn them into a form of compilation. Then it is read in its entirety by the App . You have to think, “Why give up the old code?” As your code scales, so does its complexity. Finding a correlation becomes a challenge.
Consequently Webpack was conceived to provide the following benefits:
- Separation of concerns – code can be broken down by function (ie logic, DOM).
- Separating JS files allows loading separate files instead of the entire first pageview.
- Move Babel to ES5 ES6 model without worrying about supporting older browsers.
- Rerun
packedwhen it detects saved changes. Handling ofmodulesubstitution and / or changes.
That said, figure out what can be difficult for beginners. Getting started with Webpack is like a day on the go. Especially decided to sort, pack and in the order to extract. To make it easy to imagine, plates and bowls should be packed in a foamy box like fragile objects and placed on top of the pile to avoid breakage. Meanwhile books and magazines can pile up from the bottom of the box because it can be heaviest. The general rule is not to mix different types of items into one box. If not, you will have difficulty keeping track of where things are specific.
This article assumes that readers have prior knowledge of Webpack setup. And serves as a guide to separating JS files.
Depending on your JS application, you can split your files by function. In my case, my To-Do-List application is broken down into several ways below;
- Event listener – Click the button that sends the user’s input to the backend
- User input – Data received from the user
- Control – DOM application logic – HTML output
- Starter – The default entry
- Constructor – For new objects
- Local Storage – New storage and editing of items
The image below illustrates the split JS file. It eliminates confusion and tries to interpret the code or follow the trail.
The flowchart below illustrates the call flow of functions;
Above you will see the model from start function to final function as it is similar for split files. After splitting the file, the next is to export and import them as module . The division starts from the end to the beginning.
For functionality in the final directory, use the default import and export methods as shown below;
1 2 3 4 5 6 7 | ./src/DOM/TaskDOM.js export default function renderTaskCard() { . . } |
1 2 3 4 5 6 | .src/control/taskControl.js import renderTaskCard from '../DOM/taskDOM'; . . |
Use of the ES5 export function is Eslint by Eslint . While the export default renderTaskCard() { .... of ES6 shows as a var defined because renderTaskCard () not assigned to a variable.
The image below illustrates the export and import some functions;
1 2 3 4 5 6 7 8 9 10 11 12 | .src/DOM/taskDOM.js export const renderTaskCard = () => { . . } export const closeTaskForm = () => { . . } |
1 2 3 4 5 | import { renderTaskCard, closeTaskForm } from '../DOM/taskDOM'; . . |
The function’s name is enclosed in curly braces like the function’s declaration. But how do we know what to import, export ? Easily identify the function being called.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .src/control/taskControl.js import { renderTaskCard, closeTaskForm } from '../DOM/taskDOM'; export const addTaskToProject = (..) => { . . . renderTaskCard(..); closeTaskForm(); } }; |
Then export the functions in the recipient file below;
1 2 3 4 5 6 7 8 9 10 11 12 | ./src/DOM/taskDOM export const renderTaskCard = () => { . . } export const closeTaskForm = () => { . . } |
This import and export operation is called at index.js .
Summary:
- Split file by function or function type
- When the function is
importthe target function must be declared. - Next is the
exportof target functions for file association and package.
Thanks and hope the article is useful in your work.