webpack的CSS加载器的使用-创新互联

什么是loader

loader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源（资源的位置），例如：你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

loader的解析

loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

webpack中常用的加载器

css-loader 处理css中路径引用等问题

用于在js中加载css，解释@import和url()

options

alias: 解析别名

importLoaders(@import): 在css-loader前应用的loader的数目，默认为0

Minimize: true or false 是否开启css代码压缩，比如压缩空格不换行

modules: 是否开启css-module

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.css$/,
   use: ['style-loader', {
    loader: 'css-loader',
    options: {//当css文件中又引用了其他的css的时候，需要设置importLoaders
     importLoaders: 1
    }
   }]
  }]
 }
};

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。