一、官網(wǎng)對(duì)loader的解釋：

　　1、loader 是導(dǎo)出為一個(gè)函數(shù)的 node 模塊。該函數(shù)在 loader 轉(zhuǎn)換資源的時(shí)候調(diào)用。給定的函數(shù)將調(diào)用?loader API，并通過?this?上下文訪問。

　　https://webpack.docschina.org/contribute/writing-a-loader

　　2、loader具有哪些特征？

　　https://webpack.docschina.org/concepts/loaders/#loader-features

　　loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在?import?或"加載"模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript 或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中?import?CSS文件！

二、三種本地開發(fā)測(cè)試的方法：

　　下面的一個(gè)例子是為了實(shí)現(xiàn)在開發(fā)和生產(chǎn)環(huán)境，分別引入不同的資源文件路徑。首先我們?cè)赽uild目錄下寫一個(gè)loader：

　　

　　static-loader中index.js的代碼為：

let loaderUtils = require('loader-utils');module.exports = function(source) {let options = loaderUtils.getOptions(this) || {};source = source.replace(/(\/static\/)(.*?\.(png|jpe?g|gif|webp))/g, options.replace + '$2');return source }

　　測(cè)試方法1、匹配(test)單個(gè) loader，可以簡(jiǎn)單通過在 rule 對(duì)象設(shè)置?path.resolve?指向這個(gè)本地文件

rules: [{test: /\.(js|vue|css)$/,loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}}]

　　測(cè)試方法2、匹配(test)多個(gè) loaders，可以使用?resolveLoader.modules?配置，webpack 將會(huì)從這些目錄中搜索這些 loaders。

resolveLoader: {modules: [path.resolve(__dirname, '../build/Loaders'),'node_modules']},module: {rules: [{test: /\.(js|vue|css)$/,loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}}]}

　　測(cè)試方法3、創(chuàng)建獨(dú)立的庫和包，你可以使用?npm link，來將其關(guān)聯(lián)到你要測(cè)試的項(xiàng)目。

　　1、首先在github上建立自己的倉庫，clone到本地，執(zhí)行npm init初始化項(xiàng)目，新建以下文件。

　　　 使用.gitignore和.npmignore將node_modules排除。index.js為loader代碼。

　　　　

　　2、在本地倉庫文件夾下執(zhí)行npm link，如果遇到權(quán)限問題，執(zhí)行sudo npm link

?　　3、在另外的項(xiàng)目文件中，執(zhí)行sudo npm link custome-tian-loader，將自定義的loader映射到當(dāng)前項(xiàng)目的node_modules目錄下

　　　　https://docs.npmjs.com/cli/link

三、將loader上傳至npm

　　1、首先在npmjs.com注冊(cè)一個(gè)npm賬號(hào)，設(shè)置郵箱后會(huì)收到一封驗(yàn)證的郵箱，需要去點(diǎn)擊鏈接才能發(fā)布模塊

　　2、執(zhí)行npm adduser 用戶名 或者 npm login

　　3、執(zhí)行npm publish，發(fā)現(xiàn)報(bào)錯(cuò)了：

?　 4、解決這個(gè)錯(cuò)誤的辦法：

　　　　a. 檢查倉庫是否被設(shè)成了淘寶鏡像庫
　　　　　　npm config get registry

　　　　　　https://registry.npm.taobao.org/

　　　　b. 如是，則設(shè)回原倉庫
　　　　　　npm config set registry=http://registry.npmjs.org
　　　　c. 登錄賬號(hào)（如未登錄）
　　　　　　npm login 或者添加用戶?npm adduser

　　　　d. 再次發(fā)布
　　　　　　npm publish

　　　　e. 如發(fā)布成功，則再次將倉庫地址設(shè)為淘寶鏡像地址
　　　　　　npm config set registry=https://registry.npm.taobao.org/

　　5、發(fā)布上去后，在npmjs.com官網(wǎng)就可以看到自己的loader模塊：

　　6、在項(xiàng)目中npm i custome-tian-loader，就可以和引入其他node模塊一樣引入自己的loader了：

rules: [{test: /\.(js|vue|css)$/,loader: 'custome-tian-loader',include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}} ]

?

轉(zhuǎn)載于:https://www.cnblogs.com/angelatian/p/11119739.html

總結(jié)

以上是生活随笔為你收集整理的webpack自定义loader并发布到npm的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。