Webpack - React ES6 transpile every template (src to dist)

1
votes

I am using webpack for react(es6) project.

My problem

I have built react app with ES6, so everywhere i have used import keyword for dependency. Now for server side rendering i am using NodeJS so its not support import yet. For this i have to use require instead of import.

Now i have used webpack for bundling my app, but it always generate final bundle file (single.bundle.js), That's why i am not able to import chunk of transpiled code for server side rendering.

Solution

If it is possible to transpile every file (src to dist), then i can import this es5 file into nodejs server code.

Question

Is this possible with webpack to transpile whole folder with same out put rather than bundle file ?

Otherwise i have to use grunt or gulp. :(

1
reactjswebpackhtml-webpack-plugin
It'd be helpful if you showed your package.json - U r s u s
@Ursus package.json or webpack.config.js - Nishchit
Let's see both please - U r s u s
@Ursus gist.github.com/Nishchit14/ba6edd1b36bb5161206847acf49072b3 - Nishchit
@Ursus gist.github.com/Nishchit14/82916291809827e2b6113e934adcffed - Nishchit

1 Answers

2
votes

You can use webpack for server too. It will transpile to webpack server bundle only your specific code containing react and excluding node_modules by externals option. Here is example of webpack.config.js for server side

var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    entry: './src/server.js', 
    output: {
        path: __dirname,
        filename: 'server.js'
    },
    target: 'node',
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false,
    },
    externals: nodeModules,
}