怎樣使用webpack源碼loader機(jī)制

module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 { loader: 'style-loader' },
 {
 loader: 'css-loader'
 }
 ]
 }
 ]
 }

import Styles from 'style-loader!css-loader?modules!./styles.css';

webpack --module-bind 'css=style-loader!css-loader'

//將css插入到head標(biāo)簽內(nèi)部
module.exports = function (source) {
 let script = (`
 let style = document.createElement("style");
 style.innerText = ${JSON.stringify(source)};
 document.head.appendChild(style);
 `);
 return script;
}
//使用方式1
resolveLoader: {
 modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
 test: /\.css$/,
 use: ['style-loader']
},
//使用方式2
//將自己寫(xiě)的loaders發(fā)布到npm倉(cāng)庫(kù),然后添加到依賴(lài),按照方式1中的配置方式使用即可

function iteratePitchingLoaders(options, loaderContext, callback) {
 var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
 // load loader module
 loadLoader(currentLoaderObject, function(err) {
 var fn = currentLoaderObject.pitch;
 runSyncOrAsync(
 fn,
 loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
 function(err) {
 if(err) return callback(err);
 var args = Array.prototype.slice.call(arguments, 1);
 if(args.length > 0) {
 loaderContext.loaderIndex--;
 iterateNormalLoaders(options, loaderContext, args, callback);
 } else {
 iteratePitchingLoaders(options, loaderContext, callback);
 }
 }
 );
 });
}