I have 2 tsconfigs, one for my dev build and one for my prod build.
I choose the tsconfig with the -p
flag :
tsc -p dev.tsconfig.json
Ts-loader is looking for a tsconfig.json file. How can I specify another filename with the ts-loader?
module.exports = {
entry : __dirname + "/src/app/main.ts",
output : {
path : __dirname + "/dist",
filename : "bundle.js"
},
resolve : {
extensions : ["", ".webpack.js", ".web.js", ".js", ".ts"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "ts" }
]
}
};
In Webpack 4 you need to specify the options into a use
object:
use: [{
loader: 'ts-loader',
options: {
configFile: "tsconfig.webpack.json"
}
}]
Complete Webpack config:
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'your-library-name.js',
},
module: {
rules: [
{
test: /\.ts$/,
use: [{
loader: 'ts-loader',
options: {
configFile: "tsconfig.webpack.json"
}
}],
exclude: /node_modules/,
}
]
},
mode: 'development',
resolve: {
extensions: ['.js', '.ts']
},
devtool: false
};
Here is how to specify configFile
(formerly configFileName
, as Frank notes), as of December 2017 (Webpack 3.10.0).
Note: Since version 2 , Webpack has been using module.rules
rather than module.loaders
, and has deprecated use of query params in favour of an options
object.
module.exports = {
entry: {
"./build/bundle" : "./src/startup/Entry.ts"
},
output: {
filename: '[name].js',
libraryTarget: 'this'
},
devtool: 'source-map',
resolve: {
modules: [".", "node_modules"],
extensions: [".js", ".webpack.js", ".web.js", ".d.ts", ".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [/node_modules/],
loader: "ts-loader",
options: {
configFile: "webpack_configs/tsconfig.webpack.json"
}
}
]
},
plugins: []
};
The root of my directory structure looks like:
webpack.config.js
webpack_configs/tsconfig.webpack.json
tsconfig.json
package.json
src/*
test/*
node_modules/*
build/*
... Where *
indicates multiple files.
tsconfig.webpack.json
itself just extends my generic tsconfig.json
by excluding the test
folder:
{
"extends": "../tsconfig",
"exclude": [
"node_modules",
"test"
]
}
... But you needn't have two webpack configs to benefit from the configFile
setting; you could simply use it to target your singular tsconfig.json
from a custom location.
Update (Webpack 4): As noted in the comments, the syntax has changed as referenced in the answer below .
Webpack enables us to add custom options for each loader. All ts-loader
configuration properties are described here .
configFileName
is the property you are looking for. It should be like this.
module.exports = {
entry : __dirname + "/src/app/main.ts",
output : {
path : __dirname + "/dist",
filename : "bundle.js"
},
resolve : {
extensions : ["", ".webpack.js", ".web.js", ".js", ".ts"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "ts" }
]
},
ts: {
configFileName : 'dev.tsconfig.json'
}
};
Update @ September 6, 2017
configFileName
has been deprecated in favor of configFile
- Source
More like below:
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {configFile: 'tsconfig.webpack.json'}
}
https://www.npmjs.com/package/ts-loader#configfile-string-defaulttsconfigjson
Try using configFile after the loader name as querystring. Here is webpack config and ts-loader 's config
module.exports = {
entry : "./main.ts",
output : {
path : __dirname + "/dist",
filename : "bundle.js"
},
resolve : {
extensions : ["", ".js", ".ts"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "ts-loader?configFile=src/tsconfig.server.json" }
]
},
};
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.