1

我正在将 webpack 用于 react(es6) 项目。

我的问题

我已经用 ES6 构建了 react 应用程序，所以在任何地方我都使用import关键字进行依赖。现在对于服务器端渲染，我使用的是 NodeJS，所以它还不支持导入。为此，我必须使用require而不是import。

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

解决方案

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

问题

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

否则我必须使用 grunt 或 gulp。:(

4

1 回答 1

2

您也可以将 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,
}
于 2016-07-08T12:08:14.010 回答