1.0.3 • Published 6 years ago
sails-hook-webpacker v1.0.3
Sails Hook for Webpack 4
Install
npm install sails-hook-webpacker --save
Setup
Disable the built-in Grunt hook
// .sailsrc
{
"hooks": {
"grunt": false
}
}
Set your environment
By default NODE_ENV
is set for you during development...but you should still use something like dotenv to do this.
NODE_ENV | webpack mode | description |
---|---|---|
development | webpack.watch() | Rebuilds on file changes during runtime |
staging or production | webpack.run() | Build bundle once on load. |
Setup Webpack
Example Config:
// config/webpack.js
const webpack = require('webpack');
const path = require('path');
// compile js assets into a single bundle file
module.exports.webpack = {
options: {
entry: {
app: './assets/js',
},
output: {
path: path.resolve(__dirname, '../.tmp/public/js'),
filename: '[name].js'
},
module: {
loaders: [
// put your loaders for different file types here
]
}
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/,
},
};
My preferred (subject to change) Config:
// config/webpack.js
const options = require(`./webpack/shared`);
const development = require(`./webpack/development`);
const production = require(`./webpack/production`);
module.exports.webpack = {
options,
development,
production
};
The rest can be vue'd (pun intended) here.
Add to Layout
<!-- views/layout.ejs -->
<script src="/js/app.js"></script>
Lift!
sails lift
License
MIT
Inspired by other sails-webpack-hooks like sails-hook-webpack2 and sails-hook-webpack3...just done my way and with Webpack 4 in mind.