Intro to Webpack#
Possible steps for pathway-planner#
- Set up a dist directory and src directory
- Make sure the code is distributed appropriately
- Modify package.json and webpack.config.js
- npm install the various requirements
- Maybe install css-loader and style-loader
Step 1 - getting started#
Set up#
src directory
- each javascript file imports its dependencies which webpack will use to produce optimised bundle
dist directory - include main.js - as the bundle
- npx webpack
-
Takes src/index.js as entry point and generates dist/main.js
-
modify package.json to make private
- install dependencies with npm
- npm install --save for production bundle
- npm install --save-dev_ for development purposes
Dev - npm script#
Add a line to the package.json so that "build" runs webpack
Asset Management#
i.e. images, css files etc. webpack handles those.
Practice to use bundle.js rather than main.js?
css - style-loader and css-loader used to import CSS file from javascript. Needs to be installed with npm .. these are dev dependencies
webpack config is used to specify how to handle these dependencies. i.e find css file and run css-loader and style-loader
images - need file-loader But there are also image-webpack-loader and url-loader that can minify and optise images
Before using those, current bundle.js is 75.2kb
Loading data#
Loading data from JSON is built in - but I'm not really doing that. There are also CSV and xml loaders