我有一个 Node 应用程序,它使用 react-router 在服务器端呈现 React View 。我的问题是我正在使用 require.ensure
在客户端进行代码拆分,但不想在编译服务器端代码时进行代码拆分。这是我的 webpack 配置:
{
entry: path.join(__dirname, '../server/app.js'),
target: 'node',
output: {
path: './',
filename: 'server.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.hbs$/, loader: 'handlebars-loader', include: /client/ }
]
},
externals: nodeModules
}
当我运行它时,我得到 server.js、1.server.js、2.server.js 等。我宁愿只有一个 server.js 文件。
在我拥有的每个路由文件的顶部:
if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require);
当我在开发中使用 require('babel/register')
时,这会起作用,但我宁愿有一个用于生产的编译文件。
最佳答案
我已经通过围绕要求的条件来解决这个问题。如果它是一个浏览器构建,require.ensure,如果它是一个服务器构建,只需要。我用 DefinePlugin为每个构建的环境定义“常量”变量,所以它看起来像
if (BUILD_BROWSER) {
require.ensure('foo.js', function() { ... });
} else {
require('foo.js');
...
}
Webpack 的静态分析仅智能到可以理解 bool 值,所以像 if (BUILD_TARGET === 'browser')
这样的操作是行不通的;解析器不会遵循逻辑并将处理这两个要求。
如果您使用的是 Uglify 插件,它将去除不需要的条件逻辑,这样您就不会膨胀您的生产构建。
关于javascript - Webpack 在目标 Node 时忽略代码拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35372503/