从吞咽中调用webpack时的意外异常

Question

我已经成功地配置了webpack，将我的TypeScript资源捆绑在一起。我基本上遵循了这些指示的TypeScript项目。

因此，当我输入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流让我吹过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"
  }

typescript、webpack、webpack-cli的版本由awesome-typescript-loader声明是与Mypackage.json声明的相同的major.minor。然而，webpack-stream可能更老了，因为它引用了webpack 3.4.1 (目前为4.12.2)和GUP3.9.0(目前4.0.0)。

Answer 1

似乎罪魁祸首是webpack流，它使用的是webpack的旧版本；它还没有被更新，还没有被更新，以支持广州4。有一个开拉请求为我解决了这个问题，但它还没有被接受。

有人说应该通过新的webpack模块来解决这个问题，但是我在这里做了，它似乎什么也没做。

    .pipe(webpackStream(webpackConfig), webpack)