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