webpack 实时编译typescript与scss
2024-08-31 02:50:28
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引入:
最新文章
- HTTP 使用期及新鲜度算法
- struts2 javaweb 过滤器、监听器 拦截器 原理
- 回忆一次面试Android研发的问题
- JDK中的并发bug?
- A星寻路算法
- POJ1325 Machine Schedule
- FCKeditor使用方法技术详解
- X60的BIOS白名单-黑苹果之路
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)
- ubuntu下安装JDK详解
- winform程序中为无边框窗体手动添加窗体拖动代码
- 以 Angular 的姿势打开 Font-Awesome
- js计算剩余分钟
- Compiling U-Boot
- Linux下修改环境变量,不小心改错,找不到命令解决办法
- [UE4]判断UI动画播放方向
- file_put_contents 换行
- 【正则表达式】用js实现千位分隔符,怎么实现?
- 用scrapy爬取京东的数据
- linux:用户及文件权限管理