webpack 實時編譯typescript與scss

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode:"development",
    entry: "./src/main.ts",
    output: {
        path:path.resolve(__dirname,'static'),
        filename: "js/bundle.js",
    },
    // Enable sourcemaps for debugging webpack's output.
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [ ".ts", ".js"]
    },

    module: {
        rules:[
            {
                test:/\.ts$/,
                use:"awesome-typescript-loader",
                exclude:[path.resolve(__dirname, "node_modules")],         
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: {
                        loader: "style-loader"
                    },
                    use: [
                        {
                            loader: "css-loader",
                        },
                        {
                            loader: "sass-loader"
                        }
                    ]
                })
            }
        ]
    },
    plugins:[ 
        new CleanWebpackPlugin(),
        new ExtractTextPlugin({
            filename: "css/[name].min.css"
        }),
        new CopyWebpackPlugin([
            { from:path.join(__dirname,'src/js/system.js'),to:path.join(__dirname,'static/js')}
        ]),
       
    ],
    watchOptions:{
        poll:1000,
        aggregateTimeout:500,
        ignored:/node_modules/
    },

    // Other options...
};

tsconifig.json

{
  "compilerOptions": {
      //輸出目錄爲build
      "outDir": "./static",
      //接受js做爲輸入
      "allowJs": true,
      //轉換爲es5
      "target": "es5",

      //下面爲可選的

      //模塊引用方式爲commonjs
      "module": "commonjs",
      //用mode進行模塊解析
      "moduleResolution": "node",
      //使用sourceMap
      "sourceMap": true,
      //啓用實驗性的metadata API
      "emitDecoratorMetadata": true,
      //啓用實驗性的裝飾器
      "experimentalDecorators": true,
      //不刪去註釋
      "removeComments": false,
      //不啓用嚴格檢查
      "noImplicitAny": false
  },
  "include": [
      //讀取src目錄下的全部文件
      "./src/**/*"
  ]
}

編譯前目錄:

編譯後目錄:

systemjs引入: