错误导致 webpack 无法构建

Question

我正在使用 Webpack 编译在 React 中创建的网站的前端。

对于开发环境，在 Windows 的 cmd.exe 我运行 yarn dev 指令和 webpack 正确生成 /dist 文件夹中的包。

对于生产环境，在 Windows 的 cmd.exe 我运行 yarn production 指令，但由于我的 . ts 文件。是否可以忽略这些错误并完成捆绑包生产？

package.json:

{
  "name": "prtj",
  "version": "1.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "dev": "webpack --env=development",
    "production": "webpack --env=production"
  },
  "author": "PRG",
  "license": "ISC",
  "dependencies": {
    "i18next": "^14.0.1",
    "moment": "^2.24.0",
    "react": "^16.4.0",
    "react-day-picker": "^7.4.0",
    "react-dom": "^16.4.0",
    "react-i18next": "^9.0.10",
    "react-idle-timer": "^4.2.3",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0"
  },
  "devDependencies": {
    "@types/node": "^10.12.12",
    "@types/react": "^16.7.13",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^2.5.3",
    "url-loader": "^0.5.9",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js:

const path = require('path');
const config = require('../common/config.js');

const webpackConfig = env => {
    return {
        mode: env === "development" ? "development" : "production",
        entry: ["./src/Index.tsx"],
        output: {
            filename: "tfsBundle.js",
            path: path.join(__dirname, "dist/")
        },
        devtool: env === "development" ? "cheap-eval-source-map" : false,
        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            modules: [
                path.resolve('./node_modules/'),
                path.resolve('./src')
            ]
        },
        module: {
            rules: [
                {
                    test: /\.(jsx|tsx|js|ts)$/,
                    loader: "ts-loader",
                    options: {
                         compilerOptions: {
                            target: env === "development" ? "ES6" : "es5"
                        }
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader?limit=100000'
                }
            ]
        },
        devServer: {
            host: "localhost",
            contentBase: path.join(__dirname, "dist/")
        },
        externals: {
            'Config': config.getConfig(env),
        }
    }
};

Answer 1

您可以选择不使用 transpileOnly 处理 .ts 错误。

在你的 webpack 中。

{
  test: /\.(tsx|ts)$/,
  loader: "ts-loader",
  options: {
  transpileOnly: true 
  compilerOptions: { target: env === "development" ? "ES6" : "es5" } }
}

错误导致 webpack 无法构建

Errors cause webpack to not build

production

bundle

reactjs

webpack

webpack-production