在Node.js服务器端使用Webpack

Question

我一直在尝试将webpack与nodejs应用程序一起使用，客户端方面还好——他们网站上有相当不错的文档以及来自谷歌搜索的链接。

有没有人在nodejs服务器端使用过webpack？或者请指引我到任何有用的链接。

谢谢。

- user237865

Answer 1

这可能会有用：http://jlongster.com/Backend-Apps-with-Webpack--Part-I

关键是要在webpack配置文件中将所有第三方模块（在 node_modules 目录中）外部化。

最终的配置文件：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

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/main.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  },
  externals: nodeModules,
  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin('require("source-map-support").install();',
                             { raw: true, entryOnly: false })
  ],
  devtool: 'sourcemap'
}

- Olim Saidov

---

由于某些原因，我不得不在output部分中添加**libraryTarget : "commonjs"**才能正常工作。 - drodsou

那你如何将“依赖项”（而不是开发依赖项）添加到/build/node_modules文件夹中呢？ - ronaldwidha

我必须使用 libraryTarget: "commonjs2" 才能使它工作。 - KiwenLau

Answer 2

使用webpack 2.x的一个真实例子

我想要强调与客户端配置的不同之处：

1. target: 'node'

2. externals: [nodeExternals()]

对于Node.js而言，捆绑 node_modules/ 没有太多意义。

3. output.libraryTarget: 'commonjs2'

没有这个，你无法 require('your-library')

webpack.config.js

import nodeExternals from 'webpack-node-externals'

const config = {
  target: 'node',
  externals: [nodeExternals()],
  entry: {
    'src/index': './src/index.js',
    'test/index': './test/index.js'
  },
  output: {
    path: __dirname,
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', {
              'targets': {
                'node': 'current'
              }
            }]
          ]
        }
      }
    }]
  }
}

export default [config]

- Tyler Liu

---

请问能否解释一下，“对于 node.js，捆绑 node_modules/ 没有太多意义”这句话的意思是因为它在服务器上运行，我们不需要担心捆绑代码以减少请求的数量吗？正在学习中...谢谢。 - Ryan-Neal Mes

@Ryan-NealMes 的说法“它正在服务器上运行，我们不需要担心捆绑我们的代码以减少请求数量”是正确的。另一个原因是，如果某些库既存在于“node_modules/”中，又存在于您的捆绑包中，则会出现重复代码。 - Tyler Liu

你如何使用这个生成的服务器端捆绑包？ - 1252748

@1252748 我主要是在谈论服务器端的库。很可能我会将它发布到npmjs.org上。然后每个人都可以像使用其他node.js库一样安装和使用它。如果你拥有的是一个应用程序而不是一个库，你总是可以提取一些代码并将其制作成一个库以便重复使用代码。 - Tyler Liu

啊，我之前使用了target: 'node'这个设置，这样我就可以将一个Express服务器捆绑起来，并为生产环境将前后端捆绑在一起进行Docker化。你认为这是典型的配置选项使用方式吗？ - 1252748

有没有推荐的方法来监视服务器脚本及其依赖项，并在需要时重新启动？ - Henry

Answer 3

这是我在Nodejs应用程序中使用的webpack配置，当我想要读取JSX时，它可以实现，因为你知道，Node不能做到。

const path = require('path');

module.exports = {
  // inform webpack that I am building a bundle for nodejs rather than for the
  // browser
  target: 'node',

  // tell webpack the root file of my server application
  entry: './src/index.js',

  // tells webpack where to put the output file generated
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },

  // tells webpack to run babel on every file it runs through
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions'] } }]
          ]
        }
      }
    ]
  }
};

在您实施此操作后，不要忘记前往您的package.json文件并包含此脚本：

{
  "name": "react-ssr",
  "version": "1.0.0",
  "description": "Server side rendering project",
  "main": "index.js",
  "scripts": {
    "dev:build:server": "webpack --config webpack.server.js"
  },

- Daniel