Webpack

When working with modules (i.e. importing modules into a .js file) the browser doesn't know how to handle that code (i.e. something like import {camelCase } from 'lodash'). This is where webpack comes in.

• good tutorial: https://www.youtube.com/watch?v=5IG4UmULyoA

Initiate npm

1. npm init -y
   • yarn doesn't seem to work with this
2. lodash

• npm i lodash

3. to install to your frontend package
   • npm install --save-dev webpack webpack-cli

to run

1. add a script in package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

2. run from terminal npm run build

   • this will create /dist in the root of project.

3. edit index.html file

   • previously it was pointing to <script src="../src/index.js"></script>
   • now <script src="../dist/main.js"></script>

4. now you can open a browser and load the index.html file and see the imports from the index.js file work in the index.html.

configuration of webpack

webpack.config.js