webpack打包时ts-loader报错unexpected token ...，以及如何包含不相关的多个文件？

Question

最开始cross-env报这个错，改了版本以后，不报了，又修复了一些其他报错。
然后就到了现在这样子，ts-loader又报这个三个点了。

---

这个报错解决了，不报这个错了。原因是项目内没有装npm i typescript
现在又报了个新的错：

> mytest@1.0.0 build E:\vscode\LibTest
> cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js

clean-webpack-plugin: pausing due to webpack errors
Hash: 7dee7871b8ae1f535251
Version: webpack 4.44.1
Time: 1101ms
Built at: 2020-09-16 14:35:00
 2 assets
Entrypoint my-ts = myTest.js myTest.js.map
[0] ./LibTest/src/index.ts 2.51 KiB {0} [not cacheable] [built] [failed] [1 error]

ERROR in ./LibTest/src/index.ts
Module build failed (from ./node_modules/tslint-loader/index.js):
TypeError: Iterator value undefined is not an entry object
    at new Map (native)
    at ts (E:\vscode\LibTest\node_modules\typescript\lib\typescript.js:8716:25)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\typescript\lib\typescript.js:10864:3)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\tslint\lib\utils.js:22:10)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\tslint\lib\ruleLoader.js:24:15)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\tslint\lib\configuration.js:27:20)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\tslint\lib\index.js:21:21)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mytest@1.0.0 build: `cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mytest@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-09-16T06_35_00_808Z-debug.log

---

---

src/global/Global.ts
src/util/Util.ts
src/index.ts

Global.ts

export module GlobalModule

{

 export var traceE = function(msg:String):void

 {

 console.log(msg);

 }

}

Util.ts

export class MainTest

{

 constructor()

 {

 }

 public static getColorText(text:String, color:number):string

 {

 return "<font color='#" + color + ">" + text + "</font>";

 }

}

index.ts

//index.ts不知道怎么写才能包含上面两个文件

npm run build

报错

> mytest@1.0.0 build E:\vscode\LibTest
> cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js

clean-webpack-plugin: pausing due to webpack errors
Hash: 1a3758584bd46a30c459
Version: webpack 4.44.1
Time: 895ms
Built at: 2020-09-16 10:46:13
 2 assets
Entrypoint my-ts = myTest.js myTest.js.map
[0] ./LibTest/src/index.ts 2.72 KiB {0} [not cacheable] [built] [failed] [1 error]

ERROR in ./LibTest/src/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
E:\vscode\LibTest\node_modules\ts-loader\node_modules\micromatch\index.js:44
    let isMatch = picomatch(String(patterns[i]), { ...options, onResult }, true);
                                                   ^^^

SyntaxError: Unexpected token ...
    at NativeCompileCache._moduleCompile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:242:18)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\ts-loader\dist\utils.js:4:20)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\ts-loader\dist\after-compile.js:6:17)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\ts-loader\dist\instances.js:6:25)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\vscode\LibTest\node_modules\ts-loader\dist\index.js:5:21)
    at Module._compile (E:\vscode\LibTest\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mytest@1.0.0 build: `cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mytest@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-09-16T02_46_14_070Z-debug.log

.balelrc文件

{

 "presets": [

 ["@babel/preset-env", "es2015", "stage-2"]

 ],

 "plugins": [

 ["@babel/plugin-proposal-object-rest-spread"],

 ["@babel/plugin-transform-runtime", {

 "corejs": false,

 "helpers": false,

 "regenerator": false,

 "useESModules": false

 }

 ]

 ],

 "comments": false

}

tsconfig.json

{

 "compileOnSave": false,

 "compilerOptions": {

 "outDir": "./dist/",

 "sourceMap": true,

 "noImplicitAny": false,

 "noUnusedLocals": true,

 "noUnusedParameters": true,

 "declaration": true,

 "declarationDir": "./dist/types/",

 "declarationMap": true,

 "moduleResolution": "node",

 "module": "esnext",

 "target": "es5",

 "baseUrl": "./",

 "types": [

 "node",

 "jest"

 ],

 "typeRoots": [

 "./node_modules/@types"

 ],

 "lib": [

 "dom",

 "es2015"

 ],

 "jsx": "react",

 "allowJs": false

 },

 "include": [

 "src/**/*.ts"

 ],// 要打包的文件

 "exclude": [

 "node_modules",

 "*.test.ts"

 ]

 }

webpack.config.js

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// the path(s) that should be cleaned

let pathsToClean = ['dist'];

// the clean options to use

let cleanOptions = {

 // Simulate the removal of files 

 //

 // default: false

 dry: true,

 // Write Logs to Console

 // (Always enabled when dry is true)

 //

 // default: false

 verbose: true,

 // Automatically remove all unused webpack assets on rebuild

 //

 // default: true

 cleanStaleWebpackAssets: false,

 // Do not allow removal of current webpack assets

 //

 // default: true

 protectWebpackAssets: false,

 // **WARNING**

 //

 // Notes for the below options:

 //

 // They are unsafe...so test initially with dry: true.

 //

 // Relative to webpack's output.path directory.

 // If outside of webpack's output.path directory,

 //    use full path. path.join(process.cwd(), 'build/**/*')

 //

 // These options extend del's pattern matching API.

 // See https://github.com/sindresorhus/del#patterns

 //    for pattern matching documentation

 // Removes files once prior to Webpack compilation

 //   Not included in rebuilds (watch mode)

 //

 // Use !negative patterns to exclude files

 //

 // default: ['**/*']

 cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],

 cleanOnceBeforeBuildPatterns: [], // disables cleanOnceBeforeBuildPatterns

 // Removes files after every build (including watch mode) that match this pattern.

 // Used for files that are not created directly by Webpack.

 //

 // Use !negative patterns to exclude files

 //

 // default: disabled

 cleanAfterEveryBuildPatterns: ['static*.*', '!static1.js'],

 // Allow clean patterns outside of process.cwd()

 //

 // requires dry option to be explicitly set

 //

 // default: false

 dangerouslyAllowCleanPatternsOutsideProject: true,

 dry: true,

};

module.exports = {

 resolve: {

 extensions: ['.js', '.ts', '.json'],

 },

 devtool: 'source-map',// 打包出的js文件是否生成map文件（方便浏览器调试）

 mode: 'production',

 entry: {

 'my-ts': './LibTest/src/index.ts',

 },

 output: {

 filename: 'myTest.js',// 生成的fiename需要与package.json中的main一致

 path: path.resolve(__dirname, 'dist'),

 libraryTarget: 'commonjs',

 },

 module: {

 rules: [

 {

 test: /.js$/, 

 exclude: /node_modules/, 

 loader: "babel-loader" 

 } ,

 {

 test: /.tsx?$/,

 use: [

 {

 loader: 'tslint-loader',

 options: {

 configFile: path.resolve(__dirname, './tslint.json'),

 },

 },

 ],

 exclude: /node_modules/,

 },

 {

 test: /.tsx?$/,

 use: [

 {

 loader: 'ts-loader',

 options: {

 // 指定特定的ts编译配置，为了区分脚本的ts配置

 configFile: path.resolve(__dirname, './tsconfig.json'),

 },

 },

 ],

 exclude: /node_modules/,

 },

 ],

 },

 plugins: [new CleanWebpackPlugin(cleanOptions)],

};

package.json

{

 "name": "mytest",

 "version": "1.0.0",

 "main": "index.js",

 "dependencies": {

 "babel-loader": "^8.1.0",

 "clean-webpack-plugin": "^3.0.0",

 "cross-env": "^6.0.1",

 "jest": "^26.4.2",

 "webpack": "^4.44.1",

 "webpack-cli": "^3.3.12"

 },

 "devDependencies": {

 "@babel/plugin-proposal-object-rest-spread": "^7.11.0",

 "ts-loader": "^6.0.0",

 "tslint": "^6.1.3",

 "tslint-loader": "^3.5.4"

 },

 "scripts": {

 "build": "cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js"

 },

 "keywords": [],

 "author": "joeng",

 "license": "ISC",

 "description": "测试"

}

---

Answer 1

可能因为你配置了两个ts的loader.
你这样配置其中一个loader不会工作.
这两个loader应该是串行的,lint完了再交给ts-loader.

{
    test: /tsx?/,
    use: [
        'ts-loader',
        'tslint-loader'
    ]
}

ps.确实存在需要两个loader的情况.
比如svg的处理,某个文件夹下用url-loader当图片处理,另一个文件夹的用svg-sprite-loader处理.
这种情况就需要使用exclude/include条件错开两个loader的处理范围.