从 gulp 调用 webpack 时出现意外异常答案

【问题标题】：Unexpected exception when invoking webpack from gulp从 gulp 调用 webpack 时出现意外异常
【发布时间】：2018-12-06 07:53:41
【问题描述】：

我已成功配置 webpack 以将我的 TypeScript 源捆绑在一起。我基本上是从 TypeScript 项目中关注 these instructions 的。

结果，当我输入 npx webpack 时，我得到：

ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from frontend/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 744ms
Hash: 6577bf320859d1e9dabb
Version: webpack 4.12.2
Time: 2060ms
Built at: 06/27/2018 9:02:28 PM
        Asset      Size  Chunks             Chunk Names
    bundle.js  1.39 KiB       0  [emitted]  main
bundle.js.map  5.43 KiB       0  [emitted]  main
[0] external "React" 42 bytes {0} [built]
[2] external "ReactDOM" 42 bytes {0} [built]
[3] ./src/index.tsx 326 bytes {0} [built]
    + 1 hidden module

太好了。现在我想做一个 Gulp 任务来运行它来生成我捆绑的.js 文件。我的准系统gulpfile.babel.js 看起来像这样。我正在使用 webpack-stream 来允许我通过 webpack 进行管道传输。

import gulp from 'gulp'
import webpack from 'webpack'
import webpackStream from 'webpack-stream'
import webpackConfig from './webpack.config.js'


gulp.task('js', () => {
  gulp.src('./src/index.tsx')
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest('./dist'));
})

当我运行npx gulp js 时，它会喷出：

[21:03:57] Failed to load external module @babel/register
[21:03:57] Requiring external module babel-register
[21:03:58] Using gulpfile frontend/gulpfile.babel.js
[21:03:58] Starting 'js'...
ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from frontend/tsconfig.json
Error: It looks like you're using an old webpack version without hooks support. If you're using awesome-script-loader with React storybooks consider upgrading @storybook/react to at least version 4.0.0-alpha.3
    at Object.ensureInstance (frontend/node_modules/awesome-typescript-loader/src/instance.ts:142:9)

我很困惑为什么这个看似微小的变化会有不同的表现。如果确实正在加载旧版本的 webpack，它来自哪里？

下面是 package.json 中声明的依赖：

  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^4.0.0",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.9.2",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "webpack-stream": "^4.0.3"
  },
  "dependencies": {
    "@types/react": "^16.4.2",
    "@types/react-dom": "^16.0.6",
    "bootstrap": "^4.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }

awesome-typescript-loader 声明的 typescript、webpack、webpack-cli 的版本与我的 package.json 声明的 major.minor 相同。但是，webpack-stream 可能更旧，因为它引用了 webpack 3.4.1（当前为 4.12.2）和 gulp 3.9.0（当前为 4.0.0）。

【问题讨论】：

标签： typescript webpack gulp

【解决方案1】：

罪魁祸首似乎是使用旧版本 webpack 的 webpack-stream；它尚未更新以支持 webpack 4。有一个 open pull request 为我解决了这个问题，但它尚未被接受。

其他人评论说应该通过传入较新的webpack模块来解决，但是我做了，在这里，它似乎没有做任何事情。

    .pipe(webpackStream(webpackConfig), webpack)

【讨论】：