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引入:
webpack 实时编译typescript与scss的更多相关文章
- webpack to package typescript & scss
Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...
- webpack中使用typescript
概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- Webstorm实时编译SASS和LESS
Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右 ...
- 前端自动化之sass实时编译及自动刷新浏览器
gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...
- webpack 的编译原理
自从接触了react,vue 这两个框架,都会用到webpack这个打包工具.面试的时候,经常被问到知道webpack的编译原理吗? 可以简单的介绍一下.每每这个时候都被问的哑口无言,平时用的时候挺顺 ...
- 教你使用Webpack搭建环境 TypeScript (2)
一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...
- gulp.js实现less批量实时编译
问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...
- Idea 实时编译 和 热部署
实时编译 idea自动保存编写好的文件,但是不会编译,想要编译需要按ctrl+F9(编译整个项目)ctrl+shift+f9(单个文件),不仅麻烦而且和平常习惯也不相复合.怎么令idea的ctrl+s ...
随机推荐
- uva 11665 Chinese Ink (几何+并查集)
UVA 11665 随便给12的找了一道我没做过的几何基础题.这题挺简单的,不过uva上通过率挺低,通过人数也不多. 题意是要求给出的若干多边形组成多少个联通块.做的时候要注意这题是不能用double ...
- fakeroot与sudo的区别
fakeroot 可以用来模拟 root 权限,以便建立特定权限与档案拥有者的压缩文件案(tar, ar, .deb 等).透过 LD_PRELOAD 的 dynamic loader 功能,用户不必 ...
- 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 ...
- Laravel 服务提供者实例教程 —— 创建 Service Provider 测试实例
从某种意义上说,服务提供者有点类似HTTP控制器,HTTP控制器用于为相关路由注册提供统一管理,而服务提供者用于为相关服务容器提供统一绑定场所,此外服务提供者还可以做一些初始化启动操作.Laravel ...
- ThinkPHP3.2版本安全更新
近日我们收到了一个关于3.2版本的漏洞提醒,官方已经第一时间进行处理和更新.由于3.2版本已经过了官方的维护和安全更新周期,而且大量的开发者也进行了二次开发,因此不再发布新版,官方仅进行安全公告和修复 ...
- C# 传入 params object 长度
刚刚 LiesAuer 大神问了一个问题,如果在 params object 传入 object 数组,那么拿到的值是的长度是多少 我做了测试在传入不同的值可能拿到不同的长度 先来说总结 传入一个数组 ...
- 【t013】无聊的军官
Time Limit: 1 second Memory Limit: 32 MB [问题描述] 每个学年的开始,高一新生们都要进行传统的军训.今年有一个军训教官十分奇怪,他为了测试学员们的反应能力,每 ...
- 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 ...
- HttpServletRequest获得Url里面传来的值
URL地址:http://XXXXX/manage/welcome?loginUser=123456String []str = request.getParameterValues("lo ...
- C# AutoResetEvent 理解
.. AutoResetEvent在内存中保持着一个bool值值为False,则使线程阻塞:值为True,使线程退出阻塞: 创建AutoResetEvent对象的实例,在函数构造中传递默认的bool值 ...