The npm documentation for using ts-loader
suggests installing typescript
and so does the official Typescript guide in webpack documentation without actually providing any reasoning behind it. For me, the everything is getting build successfully without typescript being installed. What did I miss?
My current setup:
webpack.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
output: {
filename: "bundle.js",
},
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}
package.json
{
...
"scripts": {
"webpack": "webpack",
"build:dev": "npm run webpack -- --mode development",
"start": "npm run webpack serve -- --mode development"
},
"author": "ranemihir",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.3",
"ts-loader": "^9.4.4",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
output:
asset bundle.js 1.3 KiB [compared for emit] (name: main)
asset index.html 233 bytes [compared for emit]
./src/index.ts 111 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 2099 ms
As you can see in their package.json
, typescript
is marked as a peer dependency.
Prior to npm v7, peer dependencies were not automatically installed, and you would get an error if your package wouldn't depend on TypeScript. Since npm v7, peer dependencies are automatically installed. Apparently you are using npm version 7 or higher, so TypeScript will be installed.
Nevertheless I would recommend you to add typescript
to your project's dependencies. ts-loader
will install always the latest version of TypeScript (note the "*"
). Whenever TypeScript releases a new version with breaking changes, it would be installed in your project. So if someone opens the projects after some time and runs npm install
, there is a good chance that the build is broken.