A webpack plugin to extract keywords from source files, especially useful for extracting Chinese content during i18n processes and filtering out comments.

install

$ npm install webpack-extract-keyword --save-dev

Usage

In your webpack.config.js or vue.config.js, add the plugin:

const ExtractKeyword = require('webpack-extract-keyword')

plugins: [
    new ExtractKeyword()
]

Options

disabled: (boolean) Whether the plugin is disabled. Defaults to false.
outputFile: (string) The output file path. Defaults to output.json.
include: (array of strings) The directories to include. Defaults to ['src'].
extractRegex: (RegExp) The regular expression to extract keywords. Defaults to /[\u4e00-\u9fff]+/g.

Example

public/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

/src/App.vue

<template>
    <div>
        <span>{{ Keyword }}</span>
        <span>{{ content }}</span>
        <span>模板内容</span>
        <!-- <span>注释不会提取</span> -->
    </div>
</template>

<script lang="ts" setup>
// 单行注释
import { Keyword } from './keyword'

/** 这是多行注释 */
const content = '内容'
</script>

<style lang="scss">
// 样式注释
.box {
    &::after {
        content: '伪元素';
    }
}
</style>

src/keyword.js

export const Keyword = '你好，世界！'

src/main.ts

import Vue from 'vue'
import App from './App.vue'

const keyword = '你好'

new Vue({
    el: '#app',
    render: h => h(App)
})

vue.config.js

const ExtractKeyword = require('webpack-extract-keyword')

module.exports = {
    // ...
    configureWebpack: {
        plugins: [new ExtractKeyword({ include: ['src', 'public'] })]
    }
    // ...
}

output.json

{
  "public": {
    "index.html": [
      "标题"
    ]
  },
  "src": {
    "App.vue": {
      "vue&type=script&lang=ts&setup=true": [
        "内容"
      ],
      "vue&type=style&index=0&id=7ba5bd90&lang=scss": [
        "伪元素"
      ],
      "vue&type=template&id=7ba5bd90": [
        "模板内容"
      ]
    },
    "keyword.js": [
      "你好",
      "世界"
    ],
    "main.ts": [
      "你好"
    ]
  }
}

Keywords

FAQs

What is webpack-extract-keyword?

Is webpack-extract-keyword popular?

Is webpack-extract-keyword well maintained?

Package last updated on 12 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

webpack-extract-keyword

webpack-extract-keyword

install

Usage

Options

Example

Keywords

Related posts

Static vs. Runtime Reachability: Insights from Latio’s On the Record Podcast

Opengrep Adds Apex Support and New Rule Controls in Latest Updates