a Sails 1.0 application utilizing the Webpack 2.x asset bundler.
This app is the result of running sails new --without grunt
and then adding some files, dependencies and configuration to facilitate a basic Webpack asset pipeline.
This is just an example of how you can set up your Sails app to work with Webpack. Refer to the Webpack documentation for a full guide to Webpack usage and configuration!
You’ll want to pay attention to the following files when tweaking this app to fit your specific needs:
config/webpack.js
: this contains the main Webpack configuration, which is used by a hook in the app to initialize a new Webpack 2.x compiler. See the full Webpack configuration docs for info about all of the available options.config/env/production.js
: the default Sails.js production config file has been updated to include a section that adds theUglifyJsPlugin
plugin to the Webpack config when in production mode.api/hooks/webpack
: a simple hook that starts a Webpack compiler when your Sails app lifts. In most cases you shouldn’t have to modify the hook at all.assets/js/sockets.js
: rather than including the Sails socket client using a<script>
tag, we want to do it the Webpack way byrequire()
ing the file in one of our scripts. Webpack’s dependency cacheing causes some problems with the socket client’s initialization, so we wrap the initialization step in thesockets.js
file. Any script that needs to use the socket client can do so by addingvar io = require('/relative/path/to/sockets.js')
at the top.Note that this means that
io.socket
will not be available globally -- for example, if you open up a JavaScript console in your browser, you won’t be able to doio.socket.get()
to try out a request. To make the socket client available globally, you’ll have to manually setwindow.io
in a JavaScript file.views/layout.ejs
andviews/homepage.ejs
: these have been adjusted to load the bundled scripts and stylesheets created by Webpack, rather than the individual .js and .css files that usually get copied directly fromassets
into.tmp/public
.
When you lift this seed app, the app-level webpack
hook starts a new Webpack compiler which then:
- Cleans out the
.tmp/public
folder (using theCleanWebpackPlugin
plugin) - Copies over any files from
assets/images
andassets/fonts
into.tmp/public
(using theCopyWebpackPlugin
plugin) - Loads the
assets/js/homepage.js
file - Imports the
assets/styles/homepage.less
andassets/dependencies/sockets.js
files via therequire()
statements in thehomepage.js
file. - Recursively processes any requires in those files, and combines all of the JavaScript into one file (.tmp/public/js/homepage.bundle.js) and all of the CSS into another (.tmp/public/styles/homepage.bundle.css), using the
ExtractTextPlugin
plugin. _In the production environment, the JavaScript is minified using theUglifyJsPlugin
plugin. - Starts watching
homepage.js
and any of it dependencies for changes, as well as changes/additions to files inassets/images
andassets/fonts
.
The sky’s the limit! If this starter configuration works for you, and you’ building a multi-page app, you'll probably want to add items in the sails.config.webpack.entry
dictionary for each page you build. You may also want to adjust the CopyWebpackPlugin
to add or remove asset folders to copy wholesale into .tmp/public
.