Question

我已经成功配置了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"
  }

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

Answer 1

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

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

    .pipe(webpackStream(webpackConfig), webpack)

从Gulp调用Webpack时发生意外异常

1 个答案: