关于Webpack中Loader与Plugin的实践

栏目: IT技术 · 发布时间: 4年前

内容简介:最近看一下webpack相关的内容,谈一下如何编写loader和plugin相信大家对webpack也有一定的了解,其实深入浅出webpack这本书也看了很多遍,每一次看都会有一些细节之前没有注意到,我觉得其实可以把它当成是一本工具书来看,之前我也是只看配置都有点让你看不过来,更别说其他的了。所以今天我就说一下如何编写一个loader与plugin,以及它们之间有什么却别等。

最近看一下webpack相关的内容,谈一下如何编写loader和plugin

关于Webpack中Loader与Plugin的实践

01 前言

相信大家对webpack也有一定的了解,其实深入浅出webpack这本书也看了很多遍,每一次看都会有一些细节之前没有注意到,我觉得其实可以把它当成是一本 工具 书来看,之前我也是只看配置都有点让你看不过来,更别说其他的了。

所以今天我就说一下如何编写一个loader与plugin,以及它们之间有什么却别等。

02 Loader

Loader其实就是一个转换器,把你输入的内容翻译一遍,本质上是没有什么变化的,就像中文翻译成英文一样。我们其实在不知不觉当中也使用了很多的Loader,但是我们没有过多关注而已。常用的Loader有以下几类:

常见Loader

语言转换类

babel-loader
ts-loader
sass-loader
less-loader
css-loader

文件加载类

raw-loader
file-loader
source-map-loader
node-loader
json-loader

其他loader

vue-loader
ui-component-loader
i18n-loader
ignore-loader

Loader配置

module.exports = {
  module:{
    rules:[
      {
        test:/\.scss/,
        use:[
        'style-loader',
        {
          'css-loader',
          options:{
            minimize:true
          }
        },
        'sass-loader'
        ],
      }
    ]
  }
}

以上的代码意思就是对.scss文件的转换过程,test的配置就是对某一类文件进行转换,use是使用的loader(转换器),它是一个数组,遵循从右往左的使用。先sass-loader再css-loader再style-loader。

加载本地Loaderre

我们默认的loader都是从npm上面下载的,但是假如我们要使用自己本地写的loader怎么办呢?我们在webpack里面有这样一个配置 resolveLoader ,它的意思就是说我们使用哪里的loader来加载文件,可以配置多个地方:

module.exports = {
  resolveLoader:{
    modules:['node_modules','yourPath']
  }
}

意思就是说我们可以自定义loader的路径,默认就是从node_modules里面找,但是假如你的自定义loader放在本地,可以把你的路径写在yourPath里面(相对路径)。匹配规则就是从左向右查找。

Loader编写

说了这么多,我们自己来写一个简单的loader吧,虽然是一个没有意义的loader,但是也让大家有一个简单的印象,原来写一个loader是很简单的。

  • 新建一个目录,如myLoader
  • 进入目录初始化package.json文件,安装webpack npm init -y , npm i -D webpack webpack-cli
  • 根目录下新建文件夹src,然后创建入口文件index.js —— src/index.js
  • 根目录下新建文件夹loaders,然后新建自定义myLoader.js—— loaders/myloader.js
  • 根目录下新建webpack配置文件 webpack.config.js
  • 在package.json配置webpack打包build命令

关于Webpack中Loader与Plugin的实践

package.json

{
  "name": "myLoader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

index.js

console.log('世界上最好的语言是PHP!')

myLoader.js

const loaderUtils = require('loader-utils');

module.exports = function (source) {
  const options = loaderUtils.getOptions(this);
  const result = source.replace('PHP', options.name);
  return result;
}

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development", 
  entry: {
    main: "./src/index.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: path.resolve(__dirname, "./loaders/myLoader.js"),
          options: {
            name: "JavaScript",//这里就是你要替换的值
          },
        },
      },
    ],
  },
};

好了,到此为止我们已经成功地写了一个loader,接下来我们就测试一下是否真的work!运行 npm run build 之后会输出一个dist文件夹,里面有一个main.js文件,盘它。

关于Webpack中Loader与Plugin的实践

运行/dist/main.js文件

03 Plugin

相对于Loader来说,其实plugin的机制更加灵活,它可以在webpack的运行过程中改变输出结果。简单来说就是为输出添砖加瓦。

常见Plugin

extract-text-webpack-plugin
webpack-parallel-uglify-plugin
html-webpack-plugin
dll-plugin
ignore-plugin

Plugin的工作原理

我们先来看一下简单的插件是怎么编写出来的:

class myPlugin {
  constructor(options){
    
  }
  apply(complier){
    complier.plugin('compilation',function(compilation){
      
    })
  }
}

//导出
module.exports = myPlugin;

工作流程:

  • webpack启动,执行new myPlugin(options),初始化插件并获取实例
  • 初始化complier对象,调用myPlugin.apply(complier)给插件传入complier对象
  • 插件实例获取complier,通过complier.plugin监听webpack广播的事件,通过complier对象操作webpack

Plugin编写

俗话说, talk is cheap,show me the code

还是沿用上面的代码结构,在根目录下面建一个myPlugins文件夹,里面建一个myPlugin.js文件,我们就自定义一个plugin:

class myPlugin {

    constructor(doneCallback, failCallback) {
        this.doneCallback = doneCallback;
        this.failCallback = failCallback;
    }

    apply(compiler) {
        compiler.hooks.done.tap('myPlugin', (stats) => {
            this.doneCallback(stats);
        });
        compiler.hooks.failed.tap('myPlugin', (err) => {
            this.failCallback(err);
        });
    }
}

module.exports = myPlugin;

然后我们在 webpack.config.js 文件里面先 引入插件 ,然后 配置插件 即可。

还是先打包一下,你会发现在打包过程中,webpack会广播默认的事件,这里我就监听了webpack的 done事件 (webpack构建成功,即将退出)和 fail事件 (webpack构建失败,即将退出)。

const myPlugin = require("./plugins/myPlugin");
module.exports = {
  plugins: [
    new myPlugin(
      () => {
        //throw new Error('Error!')
        console.log("成功监听到结束事件,可以执行你想要的函数!");
      },
      (error) => {
        console.log(error);
      }
    ),
  ],
}

我们运行之后发现是可以监听的,这里我把两种情况都试一下。首先正常构建,然后手动抛出错误,结果如下:

关于Webpack中Loader与Plugin的实践

成功构建

关于Webpack中Loader与Plugin的实践

失败构建

04 小结

今天没事就折腾一下看似简单的东西,比如想看一下一些经典loader和plugin的源代码,自信的我还想看一下webpack的源代码,发现看不懂,就此打住了。

不过其实plugin和loader的区别也是面试常问的,也会问你知道怎么写loader和plugin的问题,虽然自己实现的很简单甚至有点幼稚,自己感觉还好。

相信大家读了之后应该有自己的理解,以后遇到这个问题也会有自己的想法,大家实践一下就知道其中的奥秘了。

参考文章:深入浅出Webpack

关于Webpack中Loader与Plugin的实践


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人工智能产品经理——AI时代PM修炼手册

人工智能产品经理——AI时代PM修炼手册

张竞宇 / 电子工业出版社 / 2018-6 / 59

随着人工智能热潮的兴起,企业对人工智能领域产品经理的人才需求也开始井喷,人工智能产品经理成为顺应时代潮流的重要人力资源。实际上,人工智能确实给现有的产品和服务带来了全方位的升级,这也给产品经理从业人员提出了更高的要求,是关注人工智能产品的产品经理们面临的一次关键转型考验。 《人工智能产品经理——AI时代PM修炼手册》从知识体系、能力模型、沟通技巧等方面帮助大家系统地梳理了人工智能产品经理所必......一起来看看 《人工智能产品经理——AI时代PM修炼手册》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具