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.