webpack-register

Require non-js files for server rendering from webpack without pre bundling.

• Caution: This package uses some private APIs from either Node or Webpack, those APIs are not guaranteed to be kept overtime. It's also a new package under heavy developing and has not been well tested yet. If any problem happens, feel free to open an issue.
• Require:
  • Node >= v6.5.0
  • Webpack 3

Reference

• Example
  • Basic usage
• API

Example

Basic usage

Let's take a look at how things work now if we need to do server rendering with webpack. First we need to create a separated entry for pre bundling, then we production bundle that entry to CommonJS module and require it on our main server code.

We already have these two awesome packages to help us pre bundling the entry: universal-webpack and webpack-isomorphic-tools thanks to the contribution from @Nikolay and community. But if you are looking for a more simple and clean solution, let's give a try with webpack-register. It works just like babel-register:

// in our project root webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // remove style-loader, because it has browser related code
        // style-loader
        'css-loader?modules=true',
        'sass-loader',
      ],
    }, {
      test: /\.(jpg|png|ico)$/,
      use: 'file-loader',
    }],
  },
  // ...
}
 
// in our project root index.js
const webpackRegister = require('webpack-register')
webpackRegister.setOption({
  exts: ['scss', 'jpg', 'png', 'ico'],
  // for other options, have a look at the API section below
})
webpackRegister.hook({
  // if we want to serve in production mode
  // we can pass the config path here as well
  config: 'webpack.config.prod.js',
}).then(() => {
  // ready to require the main server code
  require('./src/server/up')
})
 
// and somewhere in Home.jsx
const style = require('./Home.scss')
const logoUrl = require('./logo.png')

Then we just need to run node index.js to start our server side rendering app without worrying about pre bundling, like the natural way of our current experience with require/exports in Node.

API

webpackRegister.setOption(opt)

• Set the option for webpackRegister. We should call it only once when init the app.
• Parameters
  • opt.exts:
    • Array<string> - Required
    • The extensions we want to register. Either .ext or ext is valid.
  • opt.writeOutputFiles:
    • boolean - Optional - Default false
    • A flag to indicate that it should write the output files or not.
  • opt.ignoreWebpackWarning:
    • boolean - Optional - Default false
    • A flag to indicate that it should not throw an error if the webpack has warnings in output stats.
  • opt.ignoreExistingHook:
    • boolean - Optional - Default false
    • A flag to indicate that it should not throw an error if the extension has been hooked already.
  • opt.ignoreEmptyExtOutput:
    • boolean - Optional - Default false
    • A flag to indicate that it should not throw an error if the extension has no resource output from webpack.

webpackRegister.hook(opt)

• Hook all extensions with config provided from setOption. We can call hook multiple times to update the file content, this can be useful in dev hot reloading.
• Parameters
  • opt.config:
    • Object|string - Optional - Default ./webpack.config.js.
    • The webpack config object or config path.
  • opt.stats:
    • Object - Optional - Default null
    • The webpack stats output from a previous bunlding session webpack instance. If the stats is provided, we will look for file contents from it, instead of creating a new webpack instance.
• Return
  • A Promise pending until the webpack finish bundling.

License

MIT