❤
npm
Sign UpSign In

html-webpack-loader-alpha

0.0.23 • Public • Published

HTML 加载器

处理页面里的img等资源引用，scss操作及typescript操作

安装

npm install -save-dev html-style-loader
无法与html-loader共同使用

使用

配置如下:

{
  test: /\.html$/,
  use: {
    loader: 'html-style-loader'
  }
}

可选项

{
  test: /\.html$/,
  use: {
    loader: 'html-style-loader',
    options: {
      cssmin: true,               //是否启用css压缩
      jsmin: true,                //是否启用js压缩
      ts: {                       //ts转换目标es5
        enabled: true,            //是否启用ts转换
        noImplicitAny: false,     //是否为严格模式
        options: options          //ts参数
      }
    }
  }
}

公共部分引用

 
html引用
<!--#include file="./template/text1.html" -->
css引用
/*#include file='./template/a.scss'  */
js引用
/*#include file="./template/a.js" */
 

typescript资源引用

 
<script type="text/javascript">
 
    import { * as create, template } from './entry/create';
    import icon1 from 'img/CM-card.png';
    import userList from 'json/user.json';
 
    var json = require("json/user.json");
    var bg_img = require("img/CM-cardbg.png");
 
 
    let hello: string = 'hello,world';
    console.log(create)
    console.log(template)
    console.log(icon1)
    console.log(userList)
    console.log(bg_img)
 
</script>

html使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello, webpack</title>
    <style type="text/css">
        #container{
            width: 1000px;height: 100px;margin: 0 auto;
            &>img{
                border-radius: 50%;
            }
        }
    </style> 
</head>
<body>
    <div id="container">
        <img src='favicon.png' alt="">
    </div>
</body>
<script type="text/javascript">
 
    import userList from './json/user.json';
 
    interface ConsoleInterface{
        log(...msg: any[]): any;
    }
 
    class _Console implements ConsoleInterface{
        constructor(){}
        log(...msg: any[]): any{
            console.log(msg.join(','))
        }
    }
 
    let $console = new _Console();
 
    $console.log('hello','typescript');
 
    let img = new Image();
    img.src = require('./img/CM-cardbg.png');
    
 
    for(let user of userList){
        console.log(`姓名:${user.name},年龄:${user.age},性别:${user.gender}`)	
    }
 
</script> 
</html>

email:maskletter@outlook.com

Readme

Keywords

Package Sidebar

Install

npm i html-webpack-loader-alpha

Weekly Downloads

1

Version

0.0.23

License

ISC

Last publish

Collaborators

  • xiaoyou
Try on RunKit
Report malware