webpack打包ts

目录结构

project
|__build
|__node_modules
|__src
| | index.html
| |
| |__css
| | a.css
| | b.css
| |__ts
| |main.ts
|
| package-lock.json
| package.json
| tsconfig.json
| webpack.config.json


webpack整体配置

//webpack.config.json
const path&＃61;require("path")
const HtmlWebpackPlugin&＃61;require("html-webpack-plugin")
const {CleanWebpackPlugin}&＃61;require("clean-webpack-plugin")
const MiniCssExtractPlugin&＃61;require("mini-css-extract-plugin")
module.exports&＃61;{entry:"./src/ts/main.ts",output:{filename:"js/built.js",path:path.resolve(__dirname,"build")},module:{rules:[{test:/\.css/,use:[MiniCssExtractPlugin.loader,"css-loader"]},{test:/\.js/,exclude:/node_modules/,loader:"babel-loader",options:{presets:[["&＃64;babel/preset-env",{useBuiltIns:"usage",corejs:{version:3}}]]}},{test:/\.ts/,exclude:/node_modules/,loader:"ts-loader"}]},plugins:[new CleanWebpackPlugin(),new HtmlWebpackPlugin({template:"./src/index.html"}),new MiniCssExtractPlugin({filename:"css/built.css"})],resolve:{extensions:[".ts",".tsx",".js"]},mode:"development",devServer:{static:{directory:path.resolve(__dirname,"src")},compress:true,port:3000,open:true}
}


下面是ts编译器的选项

//tsconfig.json
{"compilerOptions": {"module": "es2015","target": "es2015","strict": true,"noEmitOnError": true}
}