一直都说，webpack 一般只作为前端项目的开发工具使用，非常方便，但是因为它太好用了，而且 react 后端渲染也需要用到，所以纯粹用到后端项目也是可以的。

比如我用在 koa 项目中，为了更好得使用 babel，（babel-node 太慢了。。。项目大了之后挺要命的。。。），用 webpack 的 hot reload，缓存，然后部分编译，不要太爽~

以下是我今天创建的项目中用到的文件，需要 node v4 以上版本，然后项目中用到 koa2，于是 async-await 很自然想用起来了。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

const includePaths = [
  path.join(__dirname, './src'),
];

module.exports = {
  entry: './src/server.js',
  target: 'node',
  plugins: [
    new webpack.BannerPlugin(
      'require("source-map-support").install();',
      {raw: true, entryOnly: false}
    ),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: includePaths,
        loader: 'babel',
        query: {
          presets: ['es2015-node4'], // node v4 中很多特性已经默认打开，目前不用 es2015 这个 presets 了
          plugins: ['transform-async-to-generator'],
          cacheDirectory: '.tmp',
        },
      },
      {
        test: /\.json$/,
        include: includePaths,
        loader: 'json',
      },
    ],
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js',
  },
  devtool: 'sourcemap',
  externals: nodeExternals(),
};

Reference

[1] http://jlongster.com/Backend-Apps-with-Webpack--Part-I

原链接: https://github.com/xizhibei/blog/issues/7

知识共享许可协议

本文采用 署名 - 非商业性使用 - 相同方式共享（BY-NC-SA） 进行许可。