In the previous lesson, we installed the webpack. Before starting to write code, we should understand the directory structure, webpack’s code arrangement so that everything from the beginning is clear, like when playing soccer, you must also understand its rules using its feet. No hands, free kicks, offside, right? Writing code too, we will split two places, one where to write the project development code, one where the finished product is stored.
1. Create src folder
src stands for source (source), you create this directory and the entire code when writing, editing, development will be in this
1 2 3 4 5 6 | webpack-demo |- node_modules/ |- package-lock.json |- package.json |- src/ |
2. Create the dist folder
dist (distribution) this is the directory where the code has been optimized and completed.
1 2 3 4 5 6 7 | webpack-demo |- dist/ |- node_modules/ |- package-lock.json |- package.json |- src/ |
3. Create the webpack.config.js configuration file
Since webpack version 4, webpack doesn’t require any configuration files, but most large projects will need a more complex setup, which is why we should have a configuration file for webpack. Create webpack.config.js file in the project’s root directory
1 2 3 4 5 6 7 8 | webpack-demo |- dist/ |- node_modules/ |- package-lock.json |- package.json |- src/ |- webpack.config.js |
So basically set up the directory structure of the project. The article here is over. See you in the next article.
- Sourcode github: https://github.com/kentrung/webpack-tutorial