从Webpack 2升级到Webpack 4 -如何构建错误

Question

我有一个超级老的项目，我想从Webpack 2升级到Webpack 4。即使使用Webpack 2，当做npm run build时，我也会得到构建错误，但它们并没有阻止我在dist文件夹中生成构建输出。

当我移动到Webpack 4时，我继续看到相同的构建错误，但是构建的输出不再被填充。我得到的错误是我不想真正修复的错误，我只是想让Webpack 4产生一些输出。

我的package.json依赖性:

"devDependencies": {
"@types/prop-types": "^15.7.2",
"@types/react": "^15.6.27",
"@types/react-dom": "^15.5.10",
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^5.0.1",
"file-loader": "^0.11.1",
"fs": "0.0.1-security",
"jasmine-core": "^2.99.1",
"jquery": "^3.5.1",
"prop-types": "^15.7.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.1.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-middleware": "^0.1.21",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^2.3.2",
"semantic-ui-react": "^0.77.1",
"source-map-loader": "^0.2.4",
"typescript": "^4.1.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"jsx": "react",
"outDir": "./dist",
"lib": [
"dom",
"es5",
"es2015",
"es2015.promise"
]
},
"exclude": [
"node_modules"
]
}

and mymodule.exportswebpack.config.js

module.exports = {
context: projectBaseDir,
devtool: 'source-map',
entry: {
'LoadingApi.web': ['src/loading/loading.js', 'Old/loading.ts'],
},
output: {
path: path.resolve('./dist'),
filename: '[name].js',
sourceMapFilename: '[name].map'
},
resolve: {
extensions: ['.css', '.scss', '.ts', '.tsx', '.js', '.jsx'],
modules: [
path.resolve('./Javascript'),
nodePath
]
},
module: {
rules: [
{
enforce: 'post',
test: /.tsx?$/,
loader: "awesome-typescript-loader",
options: {
failonError: false,
},
exclude: /node_modules/
},
{
enforce: "pre",
test: /.js$/,
loader: "source-map-loader",
options: {
failonError: false,
},
exclude: /node_modules/
}
]
}
}

我正试图弄清楚我需要在Webpack 4中调整什么，以便像我过去使用Webpack 2时那样输出文件。

Answer 1

我不确定究竟是什么导致了这个问题，但我注意到的是，你正在使用的awesome-typescript-loader不再维护，并声称只支持Webpack 2。

对于最新的设置，最好使用ts-loader(或者使用预设typescript的babel-loader)。如果您希望它不受类型错误的影响而进行构建，请使用transpileOnly选项。如果你想无论如何都发出错误，但不导致构建失败，另外使用fork-ts-checker-webpack-plugin。