Introduction
Usage
After creating frontend project from the template, you will have file structures like this.
frontend
├── package.json
├── src
│ ├── application
│ │ # webpack entry files here
│ │ ├── app.js
│ │ └── app2.js
│ ├── components
│ │ └── sidebar.js
│ └── styles
│ └── index.scss
├── vendors
│ └── images
│ ├── sample.jpg
│ └── webpack.png
- You can create entry file in
src/application
(This project would detect the entry files automatically so you do not need to config Webpack) - Reusable components can be placed at
src/components
- SCSS and CSS code can be put at
src/styles
- Static assets such as images, fonts and other files can be put at
vendors
$ cd frontend
# install dependency packages
$ npm install
# build js, scss files
$ npm run start
Now you can load bundle js and css files in template
{% stylesheet_pack 'app' %}
{% javascript_pack 'app' %}
Note
- You can import multiple entry files using
stylesheet_pack
andjavascript_pack
({% javascript_pack 'app' 'app2'
) - The
javascript_pack
would also import dependency files automatically to handle code splitting - You can use
attrs
to set custom attributes, ({% javascript_pack 'app' attrs='charset="UTF-8"' %}
)