實現babel-loader
babel-loader:
let babel = require('@babel/core');
let loaderUtils = require('loader-utils');
function loader(source) { // this loaderContext
let options = loaderUtils.getOptions(this);
let cb = this.async();
babel.transform(source, {
...options,
sourceMap: true,
filename: this.resourcePath.split('/').pop(),
}, function (err, result) {
cb(err, result.code, result.map);
});
}
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",
module: {
// loader的分類,pre在前面的, post在後面, 然後就是普通normal
// loader的順序 pre +normal + inline + post; 從右向左,從下倒上
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
}
]
}
};