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引入: