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。