如何寫一個Loader
由于webpack只能解析Javascript與JSON語句舌胶。于是webpack加入了Loader的概念则酝。
Loader用于將其他語言轉(zhuǎn)化為能被webpack理解的模塊。
// Loader的基礎使用：
const path = require('path');
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
接下來我們寫一個簡單的loader瞭亮。
首先新建一個項目并導入webpack。
yarn init
yarn add webpack webpack-cli
添加index.js與一個轉(zhuǎn)化目標/fish/index.fish
// index.js
import Fish from './fish/index.fish'
console.log(Fish)
// /fish/index.fish
I'm byFish
添加一個自定義的Loader文件
// /loader/index.js
module.exports = function(source) {
return `export default ${JSON.stringify(source)}`
}
添加webpack.config.js文件，配置webpack
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
mode: 'production',
module: {
rules: [
{
test: /\.fish$/,
use: [
{
loader: path.resolve('loader/index.js'),
options: {
/* ... */
},
},
],
},
],
},
};
在package.json中加入構(gòu)建命令
{
...
"scripts": {
"build": "webpack"
}
...
}
運行后查看/dist/bundle.js，已成功編譯哮翘。
(()=>{"use strict";console.log("I'm byFish")})();
在webpack.config.js可以加入options字段颈嚼，傳遞參數(shù)。Loader中使用this.getOptions()可以接收到
// webpack.config.js
options: {
addEnd: true,
}
// loader文件
module.exports = function(source) {
const {addEnd} = this.getOptions()
const result = `"${JSON.stringify(source).slice(1, -1)}${addEnd ? ' end' : ''}"`
return `export default ${result}`
}
輸出將變成
(()=>{"use strict";console.log("I'm byFish end")})();
在異步或者更復雜的情況下Loader可以使用this.callback()來返回值饭寺。
參考
https://webpack.js.org/contribute/writing-a-loader/
