webpack--概念4--loader

1：loader基本介绍

loader用于对模块的源代码进行转换；loader可以使你在import活加载模块时预处理文件；loader可以将文件从不同的语言（如typescript）转化为JS，或将内联图像转化为data URL;loader甚至允许你直接在JS模块中import CSS文件；
例如：你可以使用loader告诉webpack加载css文件，或者将typescript转化为JS，为此首先要安装对应的loader

npm install --save-dev css-loadernpm install --save-dev ts-loader

然后指示webpack对每个.css文件使用css-loader，以及对所有.ts文件使用ts-loader

module.exports={    module:{        rules:[            {test:/\.css&/ , use:'css-loader' },            {test:/\.ts&/, use:'ts-loader'}        ]    }}

2：loader的3种使用方式

（1）配置（推荐）：在webpack.config.js文件中指定loader

module:{    rules:[        test:/\.css&/,        use:[            {                loader:'style-loader'            },            {                loader:'css-loader',                options:{                    modules:true                }            }        ]    ]}

（2）内联：在每个import语句（或者任何等效import的方式中指定loader）中显式指定loader，使用 ! 将资源中的loader分开，分开的每个部分都相对于当前目录解析

import Styles from 'style-loader!css-loader?modules!./styles.css'

（3）CLI：在shell命令中指定他们

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

CLI就是command line interface的缩写
CLI是shell的一种实现方式，简单地的就是字符界面的命令行输入界面。
用得最多的就是例如windows的cmd命令行、UNIX/Linux的字符终端、串口连接的设备（交换机、路由器最常见）、telnet/ssh登录的用户终端等等 ;
我们通常所说的shell大都是指字符界面的用户命令行输入界面。 这种shell的实现原理基本上就是等待用户的输入（输入命令， 例如cd、dir等），然后将用户输入的命令（实际上就是一串字 符）按照约定的方式进行解释，并执行。