npm initin your project directory to generate a
npm install webpack webpack-cli --save-devto install webpack to the node_modules directory of your project.
node_modulesfolder can get really big. It is customary to add a
.gitignorefile to your project so that you don't have to sync the contents of
node_modulesto github. The dependencies that are stored there can be installed from your package.json by running
npm install, so you don't need to sync them.
distdirectory with the following contents:
dist. Go ahead and link the
main.jsfile in a script tag.
main.jsis the file that will be generated by webpack.
src/index.jswrite a simple console.log or alert statement and then run
npx webpack. Load up
dist/index.htmlin a browser to make sure everything is working correctly.
npx webpack --watchyou will not have to rerun webpack every time you make a change.
div#contentonce the page is first loaded. Since we're all set up to write our code in multiple files, let's write this initial page-load function inside of its own module and then import and call it inside of
index.js. You should have event listeners for each tab that wipes out the current contents and then runs the correct 'tab module' to populate it again.
webpackthe full bundled version of your site is available in the
distfolder, but GH pages is looking for an index.html in the root directory of your project.