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

问题

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:

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,
}

来源：https://stackoverflow.com/questions/38264260/webpack-react-es6-transpile-every-template-src-to-dist