webpack：編寫一個簡單的loader

什麼是loader：loader的本質就是一個function，在咱們進行打包的時候，幫咱們處理須要打包的文件。

編寫loader

1.建立一個文件夾，使用npm init -y來初始化

npm init -y

2.安裝一些開發依賴

npm i webpack webpack-cli clean-webpack-plugin loader-utils -D

3.建立src目錄，並在src下建立index.js

index.js內容：

console.log('hello word');

4.建立loaders目錄，並在該目錄下建立replaceLoader.js文件

replaceLoader.js內容：

const loaderUtils = require('loader-utils');
module.exports = function (source) { 
 
   
  const option = loaderUtils.getOptions(this);
  return source.replace('word', option.name);
};

註釋：

• 咱們在replaceLoader中導出的function，就是一個loader。
• 這個函數默認接收一個參數source，就是咱們打包的文件的內容，是字符串來的。
• loader-utils這個插件，使用來幫助咱們更方便的獲取咱們在webpack配置文件中傳過來的options。
• 不使用loader-utils這個插件，咱們能夠經過this.query.name來獲取咱們傳過來的options中的name
• loader不要寫成箭頭函數的形式，由於咱們要使用webpack給我提供的this
• loader必定要有返回值，咱們這裏就是將index.js文件中的word打包替換成咱們在配置文件中自定義的name

5.建立webpack.config.js文件

const path = require('path');
const { 
 
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { 
 
   
  mode: 'development',
  entry: { 
 
   
    index: './src/index.js',
  },
  output: { 
 
   
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash].js',
  },
  module: { 
 
   
    rules: [
      { 
 
   
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { 
 
   
          	// 經過文件路徑來引用loader
            loader: path.resolve(__dirname, './loaders/replaceLoader.js'), 
            options: { 
 
   
            	// 傳給loader的name參數
              name: 'wjg-webpack-loader',
            },
          }
        ],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()], // 這裏我使用來清除上一次打包的文件
};

6.使用npm run build來打包，查看生成的文件

番外篇：在loader中使用異步操做和使用多個loader

1.繼續在上面的內容中進行，在loaders文件夾中建立replaceLoaderAsync.js

module.exports = function (source) { 
 
   
  const cb = this.async();
  setTimeout(() => { 
 
   
    source = source.replace('hello', 'hi');
    cb(null, source);
  }, 1000);
};

註釋:

• 使用this.async()來幫咱們在異步操做中返回
• this.async()返回一個callback函數，上面我簡寫成了cb
• cb函數的參數：第一個是錯誤對象，沒有就寫null，第二個參數是咱們修改的source，第三個是sourceMap，第四個是meta，因爲我這裏沒有用到後面兩個，就省略不寫了

2.修改webpack.config.js文件

const path = require('path');
const { 
 
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { 
 
   
  mode: 'development',
  entry: { 
 
   
    index: './src/index.js',
  },
  output: { 
 
   
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash].js',
  },
  module: { 
 
   
    rules: [
      { 
 
   
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { 
 
   
            loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
            options: { 
 
   
              name: 'wjg-webpack-loader',
            },
          },
          // 新增異步的loader
          { 
 
   
            loader: path.resolve(__dirname, './loaders/replaceLoaderAsync.js'),
          },
        ],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()],
};

注：loader的執行順序：是從後往前執行的。

整個目錄文件：

本文分享 CSDN - 冬天愛吃冰淇淋。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。