webpack to package typescript & scss
Demo2操作手册
本Demo演示如何配合各种loader进行稍复杂的使用
准备环境
初始化环境, cd到demo目录之后, 执行如下命令:
npm init -y
npm install webpack webpack-cli -D
L2 Typescript
Typescript作为JavaScript的超集收到越来越多的开发者的欢迎. Webpack要打包Typescript需要安装:
npm install typescript ts-loader -D
新建一个typescript的配置文件tsconfig.json, 内容如下:
{
"compilerOptions": {
"target": "es5"
}
}
在src目录下新建index.ts文件, 内容如下:
class Demo2 {
Name: string;
constructor() {
this.Name = 'Demo2';
}
L2() {
console.log(`I'm demo for ts-loader, come from ${this.Name}`);
}
}
const demo = new Demo2();
demo.L2();
新建webpack.config.js, 内容如下:
module.exports = {
entry: './src/index.ts',
output: {
filename: 'output.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
}
}
执行webpack命令, 成功打包了typescript.
L3 Scss
Scss是Sass3的超集, 其语法完全兼容css3, 并且继承了Sass的强大功能. Webpack打包Scss需要安装:
npm install node-sass sass-loader css-loader style-loader -D
在src目录新建index.scss, 内容如下:
$bgColor: bisque;
body {
background-color: $bgColor;
.red {
background-color: red;
}
}
然后修改webpack.config.js内容如下:
module.exports = {
entry: './src/index.ts',
output: {
filename: 'output.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}, {
test: /\.scss$/,
use: [
{
loader: 'style-loader' //将JS字符串生成style节点
}, {
loader: 'css-loader' //将Css转换为CommonJs模块
}, {
loader: 'sass-loader' //将Sass编译成Css
}
]
}
]
}
}
需要注意的是, use数组中的loader, 越靠后越先执行, 因此执行顺序是sass->css->style. 执行webpack命令, 成功打包了scss.
webpack to package typescript & scss的更多相关文章
- webpack中使用typescript
概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...
- webpack 实时编译typescript与scss
webpack.config.js const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plug ...
- webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...
- vue2.0 vue-cli+webpack使用less和scss的说明
config 目录下好像都不需要相关配置,但是package.json里面 使用less cnpm install --save-dev less less-loader //下面不需要配置,可省略 ...
- 教你使用Webpack搭建环境 TypeScript (2)
一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...
- webpack中package.json中的Script
初始化项目 cnpm init -y ,会自动生成一个package.json文件:主要是显示项目的名称.版本.作者.协议等信息 在package.json中scripts中配置:(运行简化) 开发模 ...
- Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源
程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解webpack 5 如何高效处理CSS 资源.scss/sass 资源.l ...
- webpack package code into different bundle
Demo4操作手册 本Demo演示如何进行分块打包等较高级的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webpack w ...
随机推荐
- Day14:CSS垂直居中
verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...
- shell脚本编程之条件判断
条件测试类型: 整数测试 字符测试 文件测试 条件测试的表达式的三种方法: 1.[ expression ] 命令测试 2.[[ expression ]] 关键字测试 3.test expressi ...
- UOJ422. 【集训队作业2018】小Z的礼物 [min-max容斥,插头DP]
UOJ 思路 由于没有代码和AC记录的支撑,以下思路可能有错. 看到全部取完,大概可以想到min-max容斥. 由于期望的表达式里面合法方案的个数是在分母里面的,所以可以想到把它记录在状态里. 然而由 ...
- 创建一个简单tcp服务器需要的流程
1.socket创建一个套接字 2.bind绑定ip和port 3.listen使套接字变为可以被动链接 4.accept等待客户端的链接 5.recv/send接收发送数据
- python中string、json、bytes的转换
json->string str = json.dumps(jsonobj) bytes->string str = str(bytes,‘utf-8’) string->json ...
- Oracle语法 及 SQL题目(一)
目录 课例复制 SQL题目一 SQL题目二 SQL题目三 笔记 课例复制 OCM 全称:Oracle Certified Master 认证大师 含义:Oracle 原厂推出的数据库方向最高级别认证 ...
- Python安装第三方库常用方法
在学习Python过程中,经常要用到很多第三方库,面对各种不同情况,Python为我们提供了多种安装方法: 一.pip安装: pip安装相信大家都不陌生了,在安装第三方库中,pip是最常使用的一种方法 ...
- HTML5中的article和section的区别
HTML5中的article和section的区别 一.总结 一句话总结: article和section都相当于语义化后的div,article强调独立性,section强调分段或者分块 1.art ...
- python 输出‘\xe8\xb4\x9d\xe8\xb4\x9d’, ‘\xe6\x99\xb6\xe6\x99\xb6’, ‘\xe6\xac\xa2\xe6\xac\xa2’]
如上代码块,结果输出为: [‘\xe8\xb4\x9d\xe8\xb4\x9d’, ‘\xe6\x99\xb6\xe6\x99\xb6’, ‘\xe6\xac\xa2\xe6\xac\xa2’] 北京 ...
- oracle 删除某个用户下的所有对象
先存放好dropobj.sql 文件 然后登录需要删除的用户 删除前最好备份一下:(备份是在cmd中进行的) C:\Users\panfu>exp file=d:\expall.dmp log= ...