从 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"
  ]
}

和我的 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 那样输出文件。

Answer 1

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

要获得最新的设置，最好使用 ts-loader (or alternatively babel-loader with preset-typescript). If you want it to build despite type errors, use the transpileOnly option. If you want errors to be emitted anyways but not cause the build to fail, additionally use fork-ts-checker-webpack-plugin。

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

Upgrade from Webpack 2 to Webpack 4 - How to build with errors

javascript

typescript

webpack

webpack-4