插件 mini-css-extract-plugin 使用的详解（二）

Posted 2023-05-06

参考技术A

文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。

mini-css-extract-plugin作用： 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不过前者在 webpack4 算是废了。

安装依赖：

然后引入，配置提出 css 样式，重命名 css 文件。

其中上面的 rules 还可以修改变成这样：

打包出来的 index.css将会插入 index.html 里面的 head 标签里面。

现在如果使用下面的样式：

其中 transform: rotate(45deg); 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。

安装依赖：

配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。

完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：

打包之前的 css 样式为：

经过插件处理之后为：

如果你不想新建一个 post.config.js 文件的话可以这样配置：

处理的效果是完全和分开写一样的。

这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。

安装依赖：

注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是 生产模式（production） 。

简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：

Android 插件化Hook 插件化框架 ( 创建插件应用 | 拷贝插件 APK | 初始化插件包 | 测试插件 DEX 字节码 )

Android 插件化系列文章目录

【Android 插件化】插件化简介 ( 组件化与插件化 )
【Android 插件化】插件化原理 ( JVM 内存数据 | 类加载流程 )
【Android 插件化】插件化原理 ( 类加载器 )

【Android 插件化】“ 插桩式 “ 插件化框架 ( 原理与实现思路 )
【Android 插件化】“ 插桩式 “ 插件化框架 ( 类加载器创建 | 资源加载 )
【Android 插件化】“ 插桩式 “ 插件化框架 ( 注入上下文的使用 )
【Android 插件化】“ 插桩式 “ 插件化框架 ( 获取插件入口 Activity 组件 | 加载插件 Resources 资源 )
【Android 插件化】“ 插桩式 “ 插件化框架 ( 运行应用 | 代码整理 )

【Android 插件化】Hook 插件化框架 ( Hook 技术 | 代理模式 | 静态代理 | 动态代理 )
【Android 插件化】Hook 插件化框架 ( Hook 实现思路 | Hook 按钮点击事件 )
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动过程 | 静态代理 )
【Android 插件化】Hook 插件化框架 ( 从 Hook 应用角度分析 Activity 启动流程 一 | Activity 进程相关源码 )
【Android 插件化】Hook 插件化框架 ( 从 Hook 应用角度分析 Activity 启动流程 二 | AMS 进程相关源码 | 主进程相关源码 )

【Android 插件化】Hook 插件化框架 ( hook 插件化原理 | 插件包管理 )
【Android 插件化】Hook 插件化框架 ( 通过反射获取 “插件包“ 中的 Element[] dexElements )
【Android 插件化】Hook 插件化框架 ( 通过反射获取 “宿主“ 应用中的 Element[] dexElements )
【Android 插件化】Hook 插件化框架 ( 合并 “插件包“ 与 “宿主“ 中的 Element[] dexElements | 设置合并后的 Element[] 数组 )
【Android 插件化】Hook 插件化框架 ( 创建插件应用 | 拷贝插件 APK | 初始化插件包 | 测试插件 DEX 字节码 )

---

文章目录

• Android 插件化系列文章目录
• 前言
• 一、创建插件包应用
• 二、拷贝插件包 APK
• 三、Application 中拷贝文件及初始化插件包
• 四、插件包 DEX 字节码测试
• 五、执行结果
• 六、博客资源

---

前言

在 【Android 插件化】Hook 插件化框架 ( 通过反射获取 “插件包“ 中的 Element[] dexElements ) 博客中介绍了从 " 插件包 " APK 文件中获取 Element[] dexElements 流程 ;

在博客 【Android 插件化】Hook 插件化框架 ( 通过反射获取 “宿主“ 应用中的 Element[] dexElements ) 介绍了从 " 宿主 " 应用中获取 Element[] dexElements 流程 ;

在博客 【Android 插件化】Hook 插件化框架 ( 合并 “插件包“ 与 “宿主“ 中的 Element[] dexElements | 设置合并后的 Element[] 数组 ) 中 , 将上述从 " 插件包 " APK 文件中获取 Element[] dexElements 和 从 " 宿主 " 应用中获取 Element[] dexElements 获取的两个数组进行了合并 ;

本篇博客中开始验证上述加载的插件包 Dex 字节码是否加载成功 ;

---

一、创建插件包应用

---

创建插件包 Module 应用 ,

使用默认配置即可 , 在主界面 MainActivity 中定义一个 log 方法 , 使用该方法进行反射测试 , 在加载插件包 Element[] dexElements 成功之后 , 反射 log 方法 , 测试是否加载成功 ;

package com.example.plugin;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void log(){
        Log.i(TAG, "Plugin MainActivity");
    }
}

创建完毕后 , 编译 apk 文件 , 将文件名称修改为 plugin.apk , 并将 apk 文件拷贝到 assets/plugin.apk 位置 ;

二、拷贝插件包 APK

---

使用下面的 CommandUtils 工具类 , 将 Assets 目录中的资源文件 , 从 assets/plugin.apk 拷贝到 /data/user/0/com.example.plugin_hook/files/plugin.apk ;

package com.example.plugin_hook;

import android.content.Context;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

public class CommandUtils {

    /**
     * 将 Assets 中的文件拷贝到应用内置存储区域
     * @param context   上下文
     * @param assetsFilePath Assets 中的文件路径
     * @param appFilePath 应用内置存储
     * @return
     */
    public static boolean copyAssets2File(Context context, String assetsFilePath, String appFilePath) {
        // 内置存储文件对象
        File file = new File(appFilePath);

        // 确保目录存在
        File filesDirectory = file.getParentFile();
        if (!filesDirectory.exists()){
            filesDirectory.mkdirs();
        }

        // 拷贝文件
        boolean ret = false;
        InputStream is = null;
        FileOutputStream fos = null;
        try {
            is = context.getAssets().open(assetsFilePath);
            fos = new FileOutputStream(file);
            byte[] buffer = new byte[2048];
            int n;
            while ((n = is.read(buffer)) != -1) {
                fos.write(buffer, 0, n);
            }
            fos.flush();
            ret = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (null != is) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (null != fos) {
                try {
                    fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return ret;
    }

    public static String inputStream2String(InputStream inputStream) {
        try {
            BufferedReader r = new BufferedReader(new InputStreamReader(inputStream));
            String str;
            StringBuilder sb = new StringBuilder();
            while ((str = r.readLine()) != null) {
                sb.append(str);
            }
            return sb.toString();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

三、Application 中拷贝文件及初始化插件包

---

先调用 CommandUtils 工具类 , 将文件从 assets/plugin.apk 拷贝到 /data/user/0/com.example.plugin_hook/files/plugin.apk 位置 ;

然后调用 PluginManager.getInstance(this).init() 初始化插件包 ;

代码示例 :

package com.example.plugin_hook;

import android.app.Application;
import android.util.Log;

import kim.hsl.plugin.PluginManager;

public class MyApplication extends Application {

    private static final String TAG = "MyApplication";

    @Override
    public void onCreate() {
        super.onCreate();

        // 先将 assets 中的插件包拷贝到 内置存储中
        CommandUtils.copyAssets2File(
                this,
                "plugin.apk",
                getFilesDir() + "/plugin.apk");

        // 将文件从 assets/plugin.apk 拷贝到 /data/user/0/com.example.plugin_hook/files/plugin.apk
        Log.i(TAG, "将文件从 assets/plugin.apk 拷贝到 " + getFilesDir() + "/plugin.apk");


        // 初始化插件包
        PluginManager.getInstance(this).init();

        Log.i(TAG, "插件化 初始化完毕");
    }

}

四、插件包 DEX 字节码测试

---

如果执行到该 MainActivity2 , 说明自定义的 Application 已经执行完毕 , 插件包中的 DEX 数据 Element[] dexElements 已经合并到宿主的 Element[] dexElements 数组中 , 此时可以通过反射获取插件包中的字节码类 ;

在下面的代码中 , 通过反射获取了 com.example.plugin.MainActivity 字节码类 , 再次通过反射获取其 log 方法 , 最后调用该方法 , 查看是否能打印出 Plugin MainActivity 内容 ;

    public void log(){
        Log.i(TAG, "Plugin MainActivity");
    }

MainActivity2 完整代码 :

package com.example.plugin_hook;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class MainActivity2 extends Activity {

    private static final String TAG = "MainActivity2";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        Log.i(TAG, "MainActivity2 onCreate");

        // 反射插件包中的 com.example.plugin.MainActivity
        Class<?> clazz = null;
        try {
            clazz = Class.forName("com.example.plugin.MainActivity");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

        Method method = null;
        try {
            method = clazz.getDeclaredMethod("log");
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        }

        try {
            // 执行 com.example.plugin.MainActivity 的 log 方法
            method.invoke(clazz.newInstance());
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (InstantiationException e) {
            e.printStackTrace();
        }
    }
}

五、执行结果

---

打印的主要日志如下 : 最后通过反射 , 获取了插件包中的 com.example.plugin.MainActivity 类 , 并将其实例化 , 执行其 log 方法 , 成功打印出了 MainActivity2 onCreate 日志内容 ;

I/plugin_MyApplication: 将文件从 assets/plugin.apk 拷贝到 /data/user/0/com.example.plugin_hook/files/plugin.apk
I/plugin_MyApplication: 插件化 初始化完毕
I/plugin_MainActivity2: MainActivity2 onCreate
I/MainActivity: Plugin MainActivity

六、博客资源

---

博客资源 :

• GitHub : https://github.com/han1202012/Plugin_Hook