简体   繁体   中英

Errors cause webpack to not build

I'm using Webpack to compile the front end of a website created in React.

For the development environment, in Windows's cmd.exe I run the yarn dev instruction and the webpack correctly produces the bundles in the /dist folder.

For the production environment, in Windows's cmd.exe I run the yarn production instruction but it does not produce any bundles due to some errors in my .ts files. Is it possible to ignore these errors and complete bundles production?

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),
        }
    }
};

You can opt out using transpileOnly for .ts errors.

In your webpack.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM