标签：scss style typescript ts loader webpack output

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.

标签：scss,style,typescript,ts,loader,webpack,output
来源： https://www.cnblogs.com/jerryqi/p/11757535.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。