最近負(fù)責(zé)的Weex項(xiàng)目涉及到一些構(gòu)建上的問題,需要通過自定義webpack的loader去實(shí)現(xiàn),于是學(xué)習(xí)了一下這方面的知識,寫一篇文章做個(gè)總結(jié),以免遺忘。
大姚網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),大姚網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為大姚超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢,請找那個(gè)售后服務(wù)好的大姚做網(wǎng)站的公司定做!webpack想必前端圈的人都知道了,大多數(shù)人也都或多或少的用過。簡單的說就是它能夠加載資源文件,并對這些文件進(jìn)行一些處理,諸如編譯、壓縮等,最終一起打包到指定的文件中??梢哉f,它作為一個(gè)打包工具,在前端工程化浪潮中,起到了中流砥柱的作用。
那webpack其中非常重要的一環(huán)就是,能夠?qū)虞d的資源文件,進(jìn)行一些處理。比如把less、sass文件編譯成css文件,負(fù)責(zé)這個(gè)處理過程的,就是webpack的loader。
什么是loader
我們都知道webpack作為當(dāng)下最火的一個(gè)前端構(gòu)建工具,具有很多很實(shí)用的功能,loader就是其中之一。說的通俗一點(diǎn),loader就是用于對模塊的源碼進(jìn)行轉(zhuǎn)換。對于做Android的同學(xué),大家可以把它想象成gradle中的transform task。
loader怎么用
在平時(shí)的開發(fā)過程中,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]' } } ] }