webpack 基礎loader實現

webpack loader 學習

初識loader

webpack入門基本都看過它，webpack最主要的功能就是把藍色菱形左邊各式各樣的模塊所有打包成右邊這幾種統一規範的文件，而核心藍色菱形就是loader。

舉幾個小例子：

1. vue 文件 須要用到vue-loader
2. es6 語法 須要使用babel-loder
3. sass 樣式文件 須要用到sass-loader
4. ...

loader是什麼

1. 本質上來講loader是一個node模塊
2. 是文件加載器，可以加載資源文件，並對這些文件進行一些處理，諸如編譯、壓縮等，最終一塊兒打包到指定的文件中
3. loader支持鏈式調用，依次調用，同一種文件支持多個loader自下而上執行

loader基本使用

這是一個webpack.base.confi.js的module配置，一些文件所須要的loader通常寫在module.rules中。test定義的是正則匹配文件類型，loader是定義編譯此文件所須要的loader工具名,options、include都是一些相關配置文件，這裏不作贅述。

實現一個很是簡單的loader

從零開始新建一個文件夾loader-study

npm init
webpack init
npm install

來建立一個簡單的打包工具。
在webpack init過程當中遇到加入css babel這樣的loader的時候均可以選擇否，咱們實現的重點不在這塊。

下面貼一下webpack.config.js的代碼，都是些webpack基本配置，重點是module.rules裏面的loader配置，咱們此次要實現的是一個解析txt文件的loader，命名爲self-loader.

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

  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

  module.exports = {
    entry: {
      app: './app.js'
    },
    output: {
      filename: 'result.js',
      path: path.resolve(__dirname, 'dist')
    },

    module: {
      rules: [ 
        { // 這個loader是咱們本身實現的loader
          test: /\.txt$/,
          loader: 'self-loader'
        }
      ]
    },

    plugins: [new UglifyJSPlugin(), new HtmlWebpackPlugin({
      template: './index.html',
      filename: './output.html'
    })]
  };

接下來你須要在node_modules文件夾中建立一個self-loader 文件夾並在此文件夾下建立一個index.js。先上代碼等下解釋。

module.exports = function(source) {
    var str = source.split('').join('-')
    return `module.exports = '${str}'`
  }

在webpack中配置好了loader匹配規則，遇到txt文件都會進入這個loader方法，此方法的source參數會拿到txt文件中的全部內容，而後咱們能夠對這些內容進行處理以後返回。

爲何不直接返回，而是return module.exports = ${source}
我想各位都知道，拿到返回內容使用得import，這裏必須export。

而後咱們再建立一個app.js文件,用來展現咱們的loader成果

import hhh from'./test.txt'

  document.body.innerText = hhh
  console.log(hhh)

結果展現

test.txt 內容： 我是一個txt內容

頁面輸出：
我-是-一-個-t-x-t-內-容

package.json 配置

"dev": "webpack-dev-server --inline --progress --config webpack.config.js",
  "build": "webpack"

npm run build 能夠在dist文件中看到打包出來的index.html文件中，loader對txt文件的處理效果。

部分疑問

1. 本文實現的loader做用僅僅侷限於txt文件，那babel-loader、css-loader這些大概是怎麼實現的？

答：簡單來說，好比babel-loader,他在拿到js文件後會把js代碼 轉換成一個抽象語法樹，相似於json的一個結構，而後經過特定的編譯規則把es6的一些語法替換成es5的語法來達到編譯的效果。

1. loader中是否有更多的操做方法？

答： 是的loader中的source只是第一個參數，能夠同在this.query獲取在module.rules中配置的options參數。還有就是多個loader同步執行的時候使用this.callback(null,source,map,meta),能夠更靈活的操做source。