Webpack出力コンパイルされたtypescript as（javascript）string

Question

コンパイルされたtypescriptをExtract-Text-Webpack-Pluginを使用して抽出できる文字列として出力する方法を知っていますか？

現在、私は "ts-loader"を使用して、TypeScriptファイルをJavaScriptファイルに変換します。 しかし、出力JavaScriptがNodeJsによって実行されるJに統合されているため、結果は期待通りにはなりません。

期待どおりの結果は、Cssローダーと同様にJavaScript文字列にコンパイルして、Extract-Text-WebPack-Pluginを使用してコンパイル済みのJavascriptコンテンツを出力ファイルにレンダリングすることです（バンドルされたjsファイルブラウザ側のjavascriptライブラリとして使用されます）。

どのwebpackプラグイン/ローダーがこの問題を解決できるのかよくわかりませんか？

webpack.config.js

var webpack = require("webpack"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

var exCss = new ExtractTextPlugin('[name].bundle.css'); 
var exScss = new ExtractTextPlugin('[name].bundle.css'); 


module.exports = { 
    entry: { 
     entry:"./src/entry.js" 
    }, 
    devtool: "source-map", 
    output: { 
     path: __dirname + "/bundle", 
     publicPath: "/assets/", 
     filename: "[name].bundle.js" 
    }, 
    resolve: { 
     // Add `.ts` and `.tsx` as a resolvable extension. 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { test:/\.ts$/, loader: "ts-loader" }, 
      { test: /\.css$/, loader: exCss.extract(["css"]) } 
     ] 
    }, 
    plugins: [exScss, exCss] 
}; 

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings" 
    ] 
} 

typescriptファイル：test.ts

class FirstType{ 
    firstProp: "ok"; 
} 

let obj = new FirstType(); 
console.log(obj.firstProp); 

期待される結果：test.bundle.js

/******/ (function(modules) { // webpackBootstrap 

......

function(module, exports) { 

    "use strict"; 
    var FirstType = (function() { 
     function FirstType() { 
      this.firstProp = "ok"; 
     } 
     return FirstType; 
    }()); 
    var obj = new FirstType(); 
    console.log(obj.firstProp); 
} 
]); 

Answer 1

次のことができます。

"use strict"; 
var FirstType = (function() { 
    function FirstType() { 
     this.firstProp = "ok"; 
    } 
    return FirstType; 
}()); 
var obj = new FirstType(); 
console.log(obj.firstProp); 

不要な実際の検索結果をtest.bundle.jsカスタマイズされたローダーを使用してそれを実現します。

module.exports = function(source){ 
    var src = source; 
    src = src.replace(/\\/ig, "\\\\"); 
    src = src.replace(/\'/ig, "\\'"); 
    src = src.replace(/\"/ig, "\\\""); 
    src = src.replace(/\r/ig, "\\r"); 
    src = src.replace(/\n/ig, "\\n"); 
    return 'var content = "'+src+'";module.exports = content;'; 
};