Webpack - React ES6转换每个模板（src到dist）

Question

我正在使用webpack进行react（es6）项目。

我的问题

我已经使用ES6构建了反应应用，因此无处不在我使用 import 关键字进行依赖。现在对于服务器端渲染，我正在使用NodeJS，因此它还不支持 import 。为此，我必须使用 要求 而不是 导入 。

现在我已经使用webpack来捆绑我的应用程序，但它总是生成最终的捆绑文件（single.bundle.js），这就是为什么我无法为服务器端渲染导入大量已编译的代码。< / p>

解决方案

如果可以将每个文件（src to dist）转换，那么我可以将此es5文件导入到nodejs服务器代码中。

问题

使用webpack可以使用相同的输出而不是捆绑文件来转换整个文件夹吗？

否则我必须使用grunt或gulp。 ：（

Answer 1

您也可以将webpack用于服务器。它将转发到webpack服务器捆绑包，只包含您的特定代码包含react和 externals 选项排除node_modules。以下是服务器端

的webpack.config.js示例

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