一. 搭建項目結構

整體項目結構如圖：

1. 初始化包管理器package.json

npm init -y

2. 打包入口文件src/main.js

3. 單頁面入口public/index.html

4. 配置webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    clean: true
  },
  module: {
    rules:[]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  // 開發服務器
  devServer: {
    host: "localhost", // 啟動服務器域名
    port: "8888", // 啟動服務器端口號
    open: true, // 是否自動打開瀏覽器
  },
  // 模式
  mode: "development", // 開發模式
  devtool: "eval-source-map", // 開發環境下使用
}

5. 安裝依賴

npm i webpack webpack-cli html-webpack-plugin webpack-dev-server -D

6. 配置開發環境package.json打包命令

 "scripts": {
    "dev": "npx webpack serve --config ./webpack.config.js"
  },

7. 打包看效果

npm run dev

至此基于webpack的一個簡單的項目開發環境就搭建完成啦

二、開發第一個loader

1. 編寫loader函數，該函數接收一個參數source，表示需要轉換的文件內容，然后對source進行處理并返回新的內容。

例如，以下是一個簡單的loader函數：

/*
  loader就是一個函數
  當webpack解析資源時，會調用相應的loader去處理
  loader接受到文件內容作為參數，返回內容出去
    content 文件內容
    map SourceMap
    meta 別的loader傳遞的數據
*/

module.exports = function (content, map, meta) {
    console.log('loader加載的資源', content);
    return content;
};

2. 在webpack配置文件中添加loader的配置，可以使用相對路徑或絕對路徑指向loader函數所在的文件。

我們可以在webpack配置文件中添加以下代碼：

module.exports = {
  // ...
   module: {
    rules: [
      {
        test: /\.js$/,
        loader: "./loaders/custom-loader.js",
      },
    ]
  },
};

3. 在main.js同級目錄下創建一個test.js，然后再main.js中導入

• test.js
  

• main.js
  

4. 運行看效果

npm run dev

可以看到日志中有loader處理js文件時的輸出日志，代表我們的第一loader就創建成功啦，雖然這個loader只是個過客，并沒有對我們的js文件做任何處理，哈哈哈

但是通過這個例子，我們可以清晰的認識到loader的工作原理和運行方式，這為后面我們寫比較復雜的 loader做了鋪墊。