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