Update docs to discourage use of ts to configure ts-loader

README.md

@@ -128,9 +128,7 @@ Take advantage of the [Changelog](CHANGELOG.md) and [Upgrade Guide](UPGRADE.md).
 
 #### Options
 
-There are two types of options: TypeScript options (aka "compiler options") and loader options.
-TypeScript options should be set using a tsconfig.json file. Loader options can be set either
-using a query when specifying the loader or through the `ts` property in the webpack configuration.
+There are two types of options: TypeScript options (aka "compiler options") and loader options. TypeScript options should be set using a tsconfig.json file. Loader options can be set either using a query when specifying the loader or through the `ts` property in the webpack configuration. 
 
 ```javascript
 module.exports = {
@@ -141,13 +139,37 @@ module.exports = {
       { test: /\.tsx?$/, loader: 'ts-loader?compiler=ntypescript' }
     ]
   },
-  // specify option using `ts` property
+  // specify option using `ts` property - **only do this if you are using webpack 1**
   ts: {
     compiler: 'ntypescript'
   }
 }
 ```
 
+**WARNING** using the `ts` property is **deprecated** as webpack 2 does not allow extension of the `webpack.config.js` Consequently you are advised to use the query to configure ts-loader.  For a full breakdown of the power of query syntax have a read of [this](https://github.com/webpack/loader-utils#parsequery).
+
+##### Webpack 2
+
+You may be using webpack 2 and thinking to yourself "gosh I'm going to miss the expressiveness of using JSON to configure ts-loader".  Me too.  Well, I'm here to tell you there's a get-out-of-jail-free. You might want to use the approach below:
+
+```javascript
+var ts = {
+  compiler: 'ntypescript'
+};
+
+module.exports = {
+  ...
+  module: {
+    loaders: [
+      // specify option using query with the magic of JSON
+      { test: /\.tsx?$/, loader: 'ts-loader?' + JSON.stringify(ts) }
+    ]
+  }
+}
+```
+
+Boom!!!  You're happy now, right?
+
 ##### transpileOnly *(boolean) (default=false)*
 
 If you want to speed up compilation significantly you can set this flag.

test/comparison-tests/README.md

@@ -24,8 +24,6 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
 ```
 
 You can run all the tests in the Comparison Test Pack with `npm run comparison-tests`. You can also go into an individual test directory and manually build a project using `webpack` or `webpack --watch`. This can be useful both when developing the test and also when fixing an issue or adding a feature.

test/comparison-tests/aliasResolution/webpack.config.js

@@ -18,5 +18,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/allowJs-entryFileIsJs/webpack.config.js

@@ -19,5 +19,4 @@ module.exports = {
   }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/babel-es6resolveParent/webpack.config.js

@@ -15,5 +15,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/babel-issue81/webpack.config.js

@@ -14,5 +14,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/babel-issue92/webpack.config.js

@@ -15,5 +15,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/babel-jsxPreserve/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/basic/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/codeSplitting/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/conditionalRequire/expectedOutput-2.0/output.transpiled.txt

@@ -0,0 +1,10 @@
+    Asset       Size  Chunks             Chunk Names
+bundle.js  758 bytes       0  [emitted]  main
+chunk    {0} bundle.js (main) 285 bytes [rendered]
+    [0] ./.test/conditionalRequire/app.ts 285 bytes {0} [built]
+
+WARNING in bundle.js from UglifyJs
+Condition always false [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:5,0]
+Dropping unreachable code [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:5,0]
+Declarations in unreachable code! [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:6,0]
+Dropping unused variable debug [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:6,0]

test/comparison-tests/conditionalRequire/expectedOutput-2.0/output.txt

@@ -4,7 +4,7 @@ chunk    {0} bundle.js (main) 285 bytes [rendered]
     [0] ./.test/conditionalRequire/app.ts 285 bytes {0} [built]
 
 WARNING in bundle.js from UglifyJs
-Condition always false [!./app.ts:5,0]
-Dropping unreachable code [!./app.ts:5,0]
-Declarations in unreachable code! [!./app.ts:6,0]
-Dropping unused variable debug [!./app.ts:6,0]
+Condition always false [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:5,0]
+Dropping unreachable code [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:5,0]
+Declarations in unreachable code! [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:6,0]
+Dropping unused variable debug [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:6,0]

test/comparison-tests/conditionalRequire/expectedOutput-2.1/output.transpiled.txt

@@ -0,0 +1,10 @@
+    Asset       Size  Chunks             Chunk Names
+bundle.js  758 bytes       0  [emitted]  main
+chunk    {0} bundle.js (main) 285 bytes [rendered]
+    [0] ./.test/conditionalRequire/app.ts 285 bytes {0} [built]
+
+WARNING in bundle.js from UglifyJs
+Condition always false [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:5,0]
+Dropping unreachable code [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:5,0]
+Declarations in unreachable code! [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:6,0]
+Dropping unused variable debug [?{"silent":true,"compilerOptions":{"newLine":"LF"},"transpileOnly":true}!./app.ts:6,0]

test/comparison-tests/conditionalRequire/expectedOutput-2.1/output.txt

@@ -4,7 +4,7 @@ chunk    {0} bundle.js (main) 285 bytes [rendered]
     [0] ./.test/conditionalRequire/app.ts 285 bytes {0} [built]
 
 WARNING in bundle.js from UglifyJs
-Condition always false [!./app.ts:5,0]
-Dropping unreachable code [!./app.ts:5,0]
-Declarations in unreachable code! [!./app.ts:6,0]
-Dropping unused variable debug [!./app.ts:6,0]
+Condition always false [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:5,0]
+Dropping unreachable code [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:5,0]
+Declarations in unreachable code! [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:6,0]
+Dropping unused variable debug [?{"silent":true,"compilerOptions":{"newLine":"LF"}}!./app.ts:6,0]

test/comparison-tests/conditionalRequire/webpack.config.js

@@ -33,5 +33,4 @@ module.exports = {
     ]
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/constEnumReExportWatch/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/create-and-execute-test.js

@@ -121,20 +121,29 @@ function storeSavedOutputs(saveOutputMode, outputs, test, options, paths) {
 
 function createWebpackConfig(paths, transpile) {
     var config = require(path.join(paths.testStagingPath, 'webpack.config'));
+
+    var options = config.ts || {};
+    options.silent = true;
+    options.compilerOptions = {
+        newLine: 'LF'
+    }
+
+    if (transpile) { options.transpileOnly = true; }
+
+    var rules = config.module.loaders || config.module.rules;
+    rules.forEach(function(rule) {
+        var tsLoaderPath = require('path').join(__dirname, "../../index.js");
+        rule.loader = rule.loader.replace('ts-loader', tsLoaderPath + '?' + JSON.stringify(options));
+    });
+
+    delete config.ts;
+
     config.output.path = paths.webpackOutput;
     config.context = paths.testStagingPath;
     config.resolveLoader = config.resolveLoader || {};
     config.resolveLoader.alias = config.resolveLoader.alias || {};
     config.resolveLoader.alias.newLine = path.join(__dirname, 'newline.loader.js');
     config.module.loaders.push({ test: /\.js$/, loader: 'newLine' });
-    config.ts = config.ts || {};
-    config.ts.silent = true;
-    config.ts.compilerOptions = {
-        newLine: 'LF'
-    }
-
-    if (transpile) { config.ts.transpileOnly = true; }
-
     return config;
 }
 

test/comparison-tests/declarationDeps/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/declarationOutput/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/declarationWatch/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/dependencyErrors/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/errors/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/es3/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/es5/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/es6/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/es6codeSplitting/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/es6withCJS/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/externals/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/html-webpack-plugin/webpack.config.js

@@ -19,5 +19,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/ignoreDiagnostics/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/importsWatch/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/issue372/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/issue71/webpack.config.js

@@ -15,5 +15,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/jsx/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/large/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/noErrorsPlugin/webpack.config.js

@@ -17,5 +17,4 @@ module.exports = {
     plugins: [new webpack.NoErrorsPlugin()]
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/node/webpack.config.js

@@ -13,5 +13,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+

test/comparison-tests/nodeModulesMeaningfulErrorWhenImportingTs/webpack.config.js

@@ -15,5 +15,4 @@ module.exports = {
     }
 }
 
-// for test harness purposes only, you would not need this in a normal project
-module.exports.resolveLoader = { alias: { 'ts-loader': require('path').join(__dirname, "../../index.js") } }
+