用TypeScript编写的Webpack配置抛出有关导入的错误

问题描述

我最近尝试将用JavaScript编写的Webpack配置迁移到TypeScript。不幸的是,我为此付出了很多努力。我已经为webpack编写了一个最小的配置文件,因此缺少某些部分。我的Long看起来像这样:

webpack.config.ts

我有一个import webpack from "webpack"; const config: webpack.Configuration = { entry: { bookmarklet: 'bookmarklet.ts' },output: { filename: '[name].js',path: __dirname + '/dist' } } export default config; ,其中包含:

tsconfig.json

{ "compilerOptions": { "module": "ESNext","target": "ES6","lib": ["ES6","dom"],"strict": true,"isolatedModules": true,"esModuleInterop": true,"moduleResolution": "Node","skipLibCheck": true,"noUnusedLocals": true,"noUnusedParameters": true,"removeComments": false } } 包含:

package.json

{ "name": "bookmarklets","version": "0.0.1","description": "A collection of bookmarklets","license": "MIT","scripts": { "build": "webpack --config webpack.config.ts" },"devDependencies": { "@types/node": "^14.10.0","@types/webpack": "^4.41.22","bookmarklet-wrapper-webpack-plugin": "^1.0.1","ts-node": "^9.0.0","webpack": "^4.44.1","webpack-cli": "^3.3.12" } } 上引发以下错误

yarn build

如何将我的配置封装在模块中?错误原因是什么?

更新

我还按照建议的here尝试了以下yarn run v1.22.5 $ webpack --config webpack.config.ts /home/codespace/workspace/zli-bookmarklets/webpack.config.ts:1 (function (exports,require,module,__filename,__dirname) { import webpack from "webpack"; ^^^^^^ SyntaxError: Cannot use import statement outside a module at new Script (vm.js:88:7) at NativeCompileCache._moduleCompile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:242:18) at Module._compile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:186:36) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Module.require (internal/modules/cjs/loader.js:1019:19) at require (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20) at WEBPACK_OPTIONS (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13) at requireConfig (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6) at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17 at Array.forEach (<anonymous>) at module.exports (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15) at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:71:45 at Object.parse (/home/codespace/workspace/zli-bookmarklets/node_modules/yargs/yargs.js:576:18) at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:49:8 at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:1133:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Module.require (internal/modules/cjs/loader.js:1019:19) at require (internal/modules/cjs/helpers.js:77:18) at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack/bin/webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:1133:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) at internal/main/run_main_module.js:18:47 error Command Failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tsconfig.json

不幸的是,发生相同的错误

解决方法

typescript软件包添加到package.json可以解决此问题。