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

webpack 实时编译typescript与scss的更多相关文章

  1. webpack to package typescript & scss

    Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...

  2. webpack中使用typescript

    概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...

  3. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  4. Webstorm实时编译SASS和LESS

    Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右 ...

  5. 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...

  6. webpack 的编译原理

    自从接触了react,vue 这两个框架,都会用到webpack这个打包工具.面试的时候,经常被问到知道webpack的编译原理吗? 可以简单的介绍一下.每每这个时候都被问的哑口无言,平时用的时候挺顺 ...

  7. 教你使用Webpack搭建环境 TypeScript (2)

      一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...

  8. gulp.js实现less批量实时编译

    问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...

  9. Idea 实时编译 和 热部署

    实时编译 idea自动保存编写好的文件,但是不会编译,想要编译需要按ctrl+F9(编译整个项目)ctrl+shift+f9(单个文件),不仅麻烦而且和平常习惯也不相复合.怎么令idea的ctrl+s ...

随机推荐

  1. uva 11665 Chinese Ink (几何+并查集)

    UVA 11665 随便给12的找了一道我没做过的几何基础题.这题挺简单的,不过uva上通过率挺低,通过人数也不多. 题意是要求给出的若干多边形组成多少个联通块.做的时候要注意这题是不能用double ...

  2. fakeroot与sudo的区别

    fakeroot 可以用来模拟 root 权限,以便建立特定权限与档案拥有者的压缩文件案(tar, ar, .deb 等).透过 LD_PRELOAD 的 dynamic loader 功能,用户不必 ...

  3. Codeforces Round #176 (Div. 1 + Div. 2)

    A. IQ Test 模拟. B. Pipeline 贪心. C. Lucky Permutation 每4个数构成一个循环. 当n为偶数时,n=4k有解:当n为奇数时,n=4k+1有解. D. Sh ...

  4. Laravel 服务提供者实例教程 —— 创建 Service Provider 测试实例

    从某种意义上说,服务提供者有点类似HTTP控制器,HTTP控制器用于为相关路由注册提供统一管理,而服务提供者用于为相关服务容器提供统一绑定场所,此外服务提供者还可以做一些初始化启动操作.Laravel ...

  5. ThinkPHP3.2版本安全更新

    近日我们收到了一个关于3.2版本的漏洞提醒,官方已经第一时间进行处理和更新.由于3.2版本已经过了官方的维护和安全更新周期,而且大量的开发者也进行了二次开发,因此不再发布新版,官方仅进行安全公告和修复 ...

  6. C# 传入 params object 长度

    刚刚 LiesAuer 大神问了一个问题,如果在 params object 传入 object 数组,那么拿到的值是的长度是多少 我做了测试在传入不同的值可能拿到不同的长度 先来说总结 传入一个数组 ...

  7. 【t013】无聊的军官

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 每个学年的开始,高一新生们都要进行传统的军训.今年有一个军训教官十分奇怪,他为了测试学员们的反应能力,每 ...

  8. Codeforces Round #564 (Div. 2) D. Nauuo and Circle(树形DP)

    D. Nauuo and Circle •参考资料 [1]:https://www.cnblogs.com/wyxdrqc/p/10990378.html •题意 给出你一个包含 n 个点的树,这 n ...

  9. HttpServletRequest获得Url里面传来的值

    URL地址:http://XXXXX/manage/welcome?loginUser=123456String []str = request.getParameterValues("lo ...

  10. C# AutoResetEvent 理解

    .. AutoResetEvent在内存中保持着一个bool值值为False,则使线程阻塞:值为True,使线程退出阻塞: 创建AutoResetEvent对象的实例,在函数构造中传递默认的bool值 ...