webpack-express-generator
v1.8.0
Published
Webpack good practice for Express project
Downloads
51
Readme
Webpack express generator
Webpack good practice for Express project
Build status
Why good but not best?
Nothing is perfect, including this package. It only offers "good" options for the most common cases while developing with Webpack.
You may have heard about buil tools like Vite, rollup or some frameworks like Nestjs, Nextjs, etc. They generate boilerplate but particularly for backend or frontend only. Sometimes you want a mono project that contains both, you can try this package.
Installation
npm i -g webpack-express-generator
# or
yarn global add webpack-express-generator
How to use?
Quick generate your app:
we-create your-app
Run the app:
npm start
# or
yarn start
Other options:
Usage: we-create <project-name> [options]
Options:
-v, --version output the version number
--eslint <rule> eslint config support:
recommended: eslint recommendation,
pk: my recommendation for eslint
--style <type> stylesheet support (css|sass|scss|less|styl) (default: "css")
--view <engine> view engine support (pug|ejs|hbs) (default: "pug")
--resolver <type> node module resolver (commonjs|module) (default: "commonjs")
--babel babel support
-f, --force force on non-empty directory
-h, --help display help for command
Additional infomations
- To avoid polluting server's console, I set
webpack-dev-middleware
to log only if there is any error or warning. To see whatwebpack
does, changestats
tonormal
devMiddleware(compiler, {
publicPath: config.output.publicPath,
serverSideRender: true,
stats: 'normal', // change it
writeToDisk: false,
})
- To get the assets corresponding to the view, pass the entry name defined in webpack to
getAssets
middleware.
router.get('/', getAssets('asset'), (req, res, next) => {
const assets = res.locals.assets;
// do other things
})
- Tip:
webpack-dev-middleware
will suspend all requests until the building progress is finished. To ignore requests which don't require any asset, you may follow below instruction:
const webpackBuilder = require('../middlewares/webpack-builder');
app.use('/api', apiRoutes);
// use webpackBuilder at a seperate path
app.use('/', webpackBuilder, otherRoutes);