file-loader实现
file-loader.js:
let loaderUtils = require('loader-utils');
function loader(source) {
let filename = loaderUtils.interpolateName(this, '[hash].[ext]', {content: source});
this.emitFile(filename, source); // 发射文件
return `module.exports = "${filename}"`;
}
loader.raw = true;// 使用二进制
module.exports = loader;
url-loader实现
url-loader.js:
let loaderUtils = require('loader-utils');
let mime = require('mime');
function loader(source) {
let {limit} = loaderUtils.getOptions(this);
console.log(source.length);
if (limit && limit > source.length) {
console.log(this.resourcePath);
return `module.exports = "data:${mime.getType(this.resourcePath)};base64, ${source.toString('base64')}"`
} else {
return require('./file-loader').call(this, source);
}
}
loader.raw = true;
module.exports = loader;
webpack.config.js:
let path= require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
resolveLoader: {
modules: ['node_modules', path.resolve(__dirname, 'loaders')],
},
devtool: "source-map",
watch: true,
module: {
// loader的分类,pre在前面的, post在后面, 然后就是普通normal
// loader的顺序 pre +normal + inline + post; 从右向左,从下倒上
rules: [
{
test: /\.svg/,
use: {
// loader: "file-loader"
loader: "url-loader",
options: {
limit: 3000
}
}
},
{
test: /\.js$/,
use: {
loader: "banner-loader",
options: {
text: 'zhangfeng',
filename: path.resolve(__dirname, 'banner.js'),
}
}
}
]
}
};