Creating Page-Specific CSS/JS
Creating Page-Specific CSS/JS¶
If you’re creating a single page app (SPA), then you probably only need to define
one entry in
webpack.config.js. But if you have multiple pages, you might
1 2 3 4 5 6 7 8 9 10
// webpack.config.js Encore // an existing entry .addEntry('app', './assets/js/main.js') // a global styles entry .addStyleEntry('global', './assets/css/global.scss') + .addEntry('checkout', './assets/js/checkout.js') ;
script tag for
checkout.js on the checkout page (and a
checkout.css if you import any CSS).
Multiple Entries Per Page?¶
the checkout page will include
checkout.js, but will not include the
app.js that’s used on the other pages. Think of the checkout page as its
own “app”, where
checkout.js includes all the functionality you need.
page, you can create an entry that contains that code and include both that
entry and your page-specific entry. For example, suppose that the
checkout.js on the checkout page.
Be sure to create a shared entry to avoid duplicating the Webpack bootstrap logic and any shared modules.
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.