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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:webpack的CSS加载器的使用-创新互联
标题URL:http://hbruida.cn/article/ddecge.html