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

【问题标题】：Upgrade from Webpack 2 to Webpack 4 - How to build with errors从 Webpack 2 升级到 Webpack 4 - 如何构建错误
【发布时间】：2021-05-22 01:43:03
【问题描述】：

我有一个超级旧的项目，我想将它从 Webpack 2 升级到 Webpack 4。即使使用 Webpack 2，在执行 npm run build 时我也遇到了构建错误，但它们并没有阻止我在 @ 中生成构建输出987654322@文件夹。

当我迁移到 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"
  ]
}

还有我的module.exports在webpack.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 一样获得输出文件。

【问题讨论】：

有什么错误？
错误类似于：ERROR in [at-loader] Property 'props' does not exist on type 'LoadingMenu'.
好的，所以你完全想忽略打字稿。为什么不构建你所有的 javascript（来自 tsc --emit-only）一次，提交它，然后忘记你曾经想要真正采用 typescript

标签： javascript typescript webpack webpack-4

【解决方案1】：

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

对于最新的设置，最好使用ts-loader（或babel-loader with preset-typescript）。如果您希望它在类型错误的情况下仍然构建，请使用 transpileOnly 选项。如果您希望无论如何都发出错误但不会导致构建失败，请另外使用fork-ts-checker-webpack-plugin。

【讨论】：