Assets play an important role in any website, and through the years there’s been a lot of asset management tools.
We finally found one that we think is good enough, and we have opted to use
Webpack as our asset management tool.
Assets will be taken from the
ModuleName/assets directory, transpiled, and added to the
public/ModuleName and you should reference this location in your HTML.
Please note the system will remove everything in the app folder before running the production command, to remove any old unusued items, so DO NOT add anything to the public folder manually
NPM be part of the Node installation, but if you manage to only install Node, please be advised that NPM is required too.
Webpack is only ever supposed to run on the development machine. You should NEVER install the node-modules on your production machine.
Simply run the production command before pushing to git, and when you deploy you get the production-ready assets without having Node on your production machine.
Webpack is flexible
The flexibility of webpack pursuaded us into using it. A long with every frontend install, a
webpack.conf.js file is present. This file is the configuration for webpack, and should by default fit most applications.
The configuration is set to take care of the following filetypes:
and does have a few requirements to work.
1) If you add more components, register in the
appModules array in the config file.
1) All types of files should be in their own directory, eg.
scss in a
1) Only items in the outmost directory will be used, so feel free to create a
components directory inside
scss and import components in your main file
Contents of App/assets could look like this:
Contents of the
scssfolder could look like this:
what does it do
Webpack has two modes,
In development, webpack helps you by creating sourcemaps for easier debugging and better overview.
In production, all assets are minified and prepared for production use, and no sourcemaps will be generated.
Our config comes with three commands
npm run dev
dev command runs the webpack through once, in development mode. This means it will generate sourcemaps and transpile Scss and Js into css and js that all browsers can understand.
npm run watch
watch command works similarly to the dev command, but instead of running it through once, it keeps listening for file-changes, and whenever one of your source-file changes, it transpiles that. It remains incredibly fast by only transpiling a single source-file at a time.
Note: if left running for a while it can get stuck, so please restart the process once in a while, or stop it when you’re not using it.
npm run prod
prod command runs the production build. This takes all the sourcefiles and minifies them, so they’re ready for production.
This should only be run just before committing.
This page was generated by GitHub Pages.