article-new.md

1. Initialize sails web app by doing sails new sails-webpack and then Choose 1 for “Web App”.
2. Uninstall Grunt: a. Run npm un grunt sails-hook-grunt. b. Delete /tasks directory.
3. Install packages for our webpack hook: a. Install dev dependency by running npm i webpack -D. b. Install lodash as prod dependency (as I'm sure you'll use this in prod later) by running npm i lodash.
4. Create webpack hook: a. Run sails generate hook webpack, this creates file api/hooks/webpack/index.js. b. Overwrite it with this contents - https://gist.github.com/Noitidart/e1a674f9b6dfcd8219baab1e6bce7b04
5. Create webpack config: a. Install dependencies by running npm i -D babel-loader css-loader less less-loader style-loader mini-css-extract-plugin copy-webpack-plugin b. Create /config/webpack.js file and fill it with this contents - https://gist.github.com/Noitidart/1094a4c3ee60f38714d35752b761fd43
6. Create babel config: a. Install dev dependencies with npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env b. Install prod dependencies with npm i @babel/runtime. c. Then create file /.babelrc and populate it with - https://gist.github.com/Noitidart/b23684edc4da24a374071f8feacb8b33
7. Add our Javascript and CSS to our HTML by opening views/layouts/layout.ejs: a. Find <!--STYLES--> and <!--STYLES END-->. In between this, paste this - https://gist.github.com/Noitidart/ff5f3d097bffb3bc5f9188b27db51b53 b. Find <!--SCRIPTS--> and <!--SCRIPTS END-->. In between this, paste this - https://gist.github.com/Noitidart/a39744399c73e12404d97ccd839e86af
8. Create /assets/js/index.js and populate it with this - https://gist.github.com/Noitidart/2ea431e34fd6ed947f4ae4049ad732a6

• Whenever you add a new page with sails generate page foo make sure to add import import './pages/foo.page.js'; at the bottom of this file.

9. That's it! Do a sails lift and enjoy!

Notice how in step 7b we are injecting into the page a lot of dependencies. The order of matters here. As you are now using webpack, you should slowly move away from this. For instance instead of having to put <script src="/dependencies/moment.js"></script> inside layout.ejs, you would import moment from 'moment' in the files you are using it. Once you move to using import statements for these dependencies, you can remove it from the scripts in layout.ejs.