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