详解webpack自定义loader初探-创新互联
最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘。
大姚网站建设公司创新互联,大姚网站设计制作,有大型网站制作公司丰富经验。已为大姚超过千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的大姚做网站的公司定做!webpack想必前端圈的人都知道了,大多数人也都或多或少的用过。简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中。可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用。
那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理。比如把less、sass文件编译成css文件,负责这个处理过程的,就是webpack的loader。
什么是loader
我们都知道webpack作为当下最火的一个前端构建工具,具有很多很实用的功能,loader就是其中之一。说的通俗一点,loader就是用于对模块的源码进行转换。对于做Android的同学,大家可以把它想象成gradle中的transform task。
loader怎么用
在平时的开发过程中,loader的使用也是非常常见的,我们可以在工程的webpack.config.js中定义:
module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }
网页名称:详解webpack自定义loader初探-创新互联
链接URL:http://scyanting.com/article/dschjh.html