Merge pull request #2 from JackXuyi/feature/plugin

Feature/plugin
JackXuyi · Nov 16, 2020 · bcc86ba · bcc86ba
2 parents dee1528 + 21b4b45
commit bcc86ba
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -60,3 +60,5 @@ module.exports = {
 ## 说明
 
 此方案的原理是通过 loader 收集项目中使用的资源信息，然后再通过文件递归的方式检测是否使用，所以整个项目需要编译一遍，耗时可能较长
+
+- 部分资源是在 loader 中直接调用 emitFile 生成的文件，不经过 webpack 的其它流程，所以无法在插件中获取源文件路径
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zhijianren/develop-plugin",
-  "version": "0.0.2-beta.5",
+  "version": "0.0.3",
   "description": "开发过程中项目优化",
   "main": "./lib/index.js",
   "scripts": {
@@ -25,9 +25,13 @@
     "LICENSE",
     ".gitignore",
     "tsconfig.json",
-    "src",
     "lib"
   ],
+  "keywords": [
+    "webpack",
+    "clean",
+    "assets"
+  ],
   "homepage": "https://github.com/JackXuyi/develop-plugin#readme",
   "devDependencies": {
     "@types/node": "^14.14.7",

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -13,17 +13,31 @@ export interface IOptions {
 const createPluginClass = (useAssets: Set<string>) => {
   return class {
     public options: IOptions
+    public assets: Set<string>
+    public assetsMap: { [key: string]: true } = {}
+    public files: Set<string>
 
     constructor(options: IOptions) {
       this.options = options
+      this.assets = useAssets
+      this.files = new Set()
+
+      this.getAssets()
     }
 
     public apply(compiler: any) {
       compiler.plugin('shouldEmit', () => {
-        this.outputAssets()
         const { outputAssets = false } = this.options
         return outputAssets
       })
+
+      compiler.plugin('done', () => {
+        // 遍历使用的文件
+        this.assets.forEach((file: string) => {
+          this.assetsMap[file] = true
+        })
+        this.outputAssets()
+      })
     }
 
     public getAssets() {
@@ -33,18 +47,22 @@ const createPluginClass = (useAssets: Set<string>) => {
         const list = getFileList(path.resolve(pathname))
         files.push(...list)
       })
-      return files.filter((file) => test.test(file))
+      files.forEach((file) => {
+        if (test.test(file)) {
+          this.files.add(file)
+        }
+      })
     }
 
     public outputAssets() {
       const { output, isDel } = this.options
       if (output) {
-        const projectAssets = this.getAssets()
-        const useAssetsMap: { [key: string]: true } = {}
-        useAssets.forEach((key) => (useAssetsMap[key] = true), {})
-        const projectNoUseAssets = projectAssets.filter(
-          (file) => !useAssetsMap[file],
-        )
+        const projectNoUseAssets: string[] = []
+        this.files.forEach((file) => {
+          if (!this.assetsMap[file]) {
+            projectNoUseAssets.push(file)
+          }
+        })
         if (isDel) {
           projectNoUseAssets.forEach((filename) => {
             if (delFile(filename)) {
@@ -53,10 +71,18 @@ const createPluginClass = (useAssets: Set<string>) => {
           })
         }
         if (typeof output === 'boolean') {
-          console.log(
-            chalk.red('Project do not use images list'),
-            projectNoUseAssets,
-          )
+          if (projectNoUseAssets.length) {
+            console.log(
+              chalk.yellow(
+                `${chalk.red(
+                  projectNoUseAssets.length,
+                )} files do not use, list is `,
+              ),
+              projectNoUseAssets,
+            )
+          } else {
+            console.log(chalk.green('All assets is used'))
+          }
         } else if (typeof output === 'function') {
           output(projectNoUseAssets)
         }