写一个webpack插件

时间 2019-11-07

标签一个 webpack 插件繁體版

原文原文链接

用问题去学习，用测试来验证。css

一个webpack插件简单的例子（来自webpack官方文档）

1，写一个class 类
2，写一个apply方法
3，写一个监听方法
2，写一个处理逻辑
html

// A JavaScript class.
class MyExampleWebpackPlugin {
  // Define `apply` as its prototype method which is supplied with compiler as its argument
  apply(compiler) {
    // Specify the event hook to attach to
    compiler.hooks.emit.tapAsync(
      'MyExampleWebpackPlugin',
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);

        // Manipulate the build using the plugin API provided by webpack
        compilation.addModule(/* ... */);

        callback();
      }
    );
  }
}
复制代码

compile？

看插件的时候，我就一直有个疑问，什么是compile？webpack

什么是compile？

compile就是一个webpack实例化的对象，包括webpack打包的全部的信息，全部的上下文，包括内置的函数和webpack配置的信息，总之webpack执行过程的全部的信息。web

当咱们定义的一个plugin，好比是名字是A的插件的时候，首先是定义了一个类，这个类有一个apply方法，而后方法里边监听了webpack的打包过程当中的事件。使用A的时候，把A的实例传入webpack.config.js的pulugins里边。bash

当执行webpack的时候，webpack就会执行app

A.apply(compile)
复制代码

把compile对象传给A的apply方法。ide

什么是compilation？

compilation 是每次编译的时候建立的全局变量，包含全部的上下文，同时能够取到compile对象函数

写一个插件

上面说了这么多，还不如一次实战，下面就开始写一个插件。学习

背景描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <srcipt src="1.js"> </script>
  <srcipt src="2.js"> </script>
</body>
</html>
复制代码

上面是咱们的模板html文件，如今有个问题，当经过dllPlugin和html-webpack-plugin进行打包后，会变成这样，测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <srcipt src="1.js"> </script>
  <srcipt src="2.js"> </script>
  <srcipt src="dll.js"> </script>
  <srcipt src="main.js"> </script>
</body>
</html>
复制代码

其实上面咱们的1.js和2.js通常都是代码统计js文件，如今想写个webpack插件，让打包后的文件，插入到代码统计文件的前面，也就是以下这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <srcipt src="dll.js"> </script>
  <srcipt src="main.js"> </script>
  <srcipt src="1.js"> </script>
  <srcipt src="2.js"> </script>
</body>
</html>
复制代码

分析

这里应该很简单，由于html-webpack-plugin确定是拿到咱们的js文件，而后直接插入到咱们的模板文件中去的，因此咱们要作的就是在html-webpack-plugin插入以前，咱们把html-webpack-plugin想要插入的内容给改变，把咱们想添加的给添加进去，而后再让html-webpack-plugin工做。

代码

1 定义咱们的插件，代码很简单，没什么好说的。

const HtmlWebpackPlugin = require("html-webpack-plugin");

class MyPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.compilation.tap("MyPlugin", compilation => {
      console.log("The compiler is starting a new compilation...");
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        "MyPlugin",
        (data, cb) => {
          const paths = this.options.arr1;
          console.log(111111);
          console.log(data.assets);
          for (let i = paths.length - 1; i >= 0; i--) {
            data.assets.js.push(paths[i]);
          }
          cb(null, data);
        }
      );
    });
  }
}
module.exports = MyPlugin;

复制代码

2 使用

new MyPlugin({
      arr1: [
        "https://g.alicdn.com/de/prismplayer/2.5.1/aliplayer-min.js",
        "https://hm.baidu.com/hm.js?1ea7b7fd0d7259a472147a1ffd544938"
      ]
    }),
    new HtmlWebpackPlugin({
      template: "./index.ejs",
      filename: "../index.html",
      inlineSource: "manifest",
      inject: "body"
    }),
复制代码

遇到的问题

1 html-webpack-plugin的版本刚开始过低，由于之前安装的是3.2.0的版本，致使报 HtmlWebpackPlugin.getHooks 不存在的错误

解决办法：卸载html-webpack-plugin旧版本，安装最新的html-webpack-plugin版本

2 "dependency" is not a valid chunk sort mode

new HtmlWebpackPlugin({
            chunksSortMode: 'dependency'
        }),
复制代码

解决办法：去掉chunksSortMode: 'dependency'

3 Please ensure that html-webpack-plugin was placed before html-replace-webpack-plugin in your Webpack config if you were working with Webpack 4.x!

解决办法：明明已经放在前面了，不知道为何一直报这个错误。后来一想，可能和版本有关系，由于升级了html-webpack-plugin，因此html-replace-webpack-plugin也得升级，因此把html-replace-webpack-plugin升级到2.5.6，就解决了。

new HtmlWebpackPlugin({
      template: "./index.ejs",
      filename: "../index.html",
      inlineSource: "manifest",
      inject: "body"
    }),

    new HtmlReplaceWebpackPlugin([
      {
        pattern: '<link rel="stylesheet" href="/load.css" />',
        replacement: `<style type="text/css">1111</style>`
      }
    ]),
复制代码