如何使用 webpack 2 和 babel 构建 ES6 express 应用程序？答案

【问题标题】：How to build a ES6 express app with webpack 2 and babel?如何使用 webpack 2 和 babel 构建 ES6 express 应用程序？
【发布时间】：2017-11-09 12:57:04
【问题描述】：

鉴于以下 Webpack 2 配置，我想使用 ES6 编写一个 express 应用程序。我的.babelrc 只有es2015 预设：

const path = require('path');

module.exports = {
  target: 'node',

  entry: path.resolve(__dirname, 'src', 'server.js'),

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

运行 webpack 并启动服务器工作正常，但是通过浏览器访问 URL 时出现以下错误：

Error: Cannot find module "."
    at webpackMissingModule (/Users/Me/project/dist/server.bundle.js:18208:74)

我不知道是不是因为. 在require('./some/other/file') 调用中的原因（并非所有文件都是ES6，所以这些文件使用require() 而不是import）；或者我缺少一些配置。

而且，鉴于堆栈跟踪，我无法真正将其映射到原始源文件。

提前致谢

更新 1

我刚刚意识到我正在尝试使用 webpack 转译 ES6 代码，因为我正在尝试复制另一个构建任务（mern.io 中的那个），但我可以只使用 babel 来做同样的事情。也许没有理由在服务器端使用 webpack。

【问题讨论】：

标签： node.js express webpack ecmascript-6 webpack-2

【解决方案1】：

需要安装并添加webpack.config.js ExternalsPlugin：

plugins: [
    new ExternalsPlugin({
        type: 'commonjs',
        include: path.join(__dirname, './node_modules/'),
    }),
],

它对我有帮助，我也希望你，因为我花了很多时间来解决这个问题）

【讨论】：

【解决方案2】：

可能是因为你在 webpack 配置中使用了 target: "node"。这意味着它正在为 nodejs 环境创建你的包。将其更改为 target: "web" 以进行客户端转换后，您可以进行测试吗？

https://webpack.js.org/concepts/targets/

【讨论】：

我想将它用于节点，而不是浏览器。我正在尝试制作一个编写 ES6+ 的快速应用程序。