Question

我目前有2个单独的Webpack构建，分别用于服务器渲染和客户端渲染代码。有没有一种简单的方法可以根据服务器/客户端构建来更改构建输出？

例如这样的东西：

// Have some code like this
if(is_client){
  console.log('x.y.z')
} else {
  server.log('x.y.z')
}

// Webpack outputs:
// replaced code in client.js
console.log('x.y.z')


// replaced code in server.js
server.log('x.y.z')

Answer 1

您尝试过这样的事情吗？

// webpack.config.js

module.exports = () => ['web', 'node'].map(target => {
  const config = { 
    target,
    context: path.resolve('__dirname', 'src'),
    entry: {
      [target]: ['./application.js'],
    },
    output: {
      path: path.resolve(__dirname, 'dist', target),
      filename: '[name].js'
    },
    modules: { rules: ... },
    plugins: [
      new webpack.DefinePlugin({
        IS_NODE: JSON.stringify(target === 'node'),
        IS_WEB: JSON.stringify(target === 'web'),
      }),
    ],
  };

  return config;
});

// later in your code

import logger from 'logger';

if (IS_NODE) {
  logger.log('this is node js');
}

if (IS_WEB) {
  console.log('this is web');
}

编译如何进行？

// client.bundle.js
import logger from 'logger';

// DefinePlugin creates a constant expression which causes the code below to be unreachable
if (false) {
  logger.log('this is node js');
}

if (true) {
  console.log('this is web');
}

最后，您将以生产模式进行构建，因此webpack将包含一个名为UglifyJS的插件，该插件具有一个称为dead code removal（又名摇树）的功能，因此它将删除所有未使用/无法访问的插件代码。

，最终结果将如下所示：

// node.bundle.js
import logger from 'logger';

console.log('this is node js');

//web.bundle.js

console.log('this is node js');

基于目标客户端和服务器代码的不同构建

1 个答案:

编译如何进行？