我正在做vue项目 . 我是通过vue-cli (Vue CLI v3.0.0-rc.3) 构建的 . 我想要混淆javascript文件和css类名 . 当我构建我的项目时,我收到一个错误:

模块构建失败(来自./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError:模块构建失败(来自./node_modules/postcss-loader/lib/index.js):语法错误

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "target": "es5",
        "module": "esnext",
        "strict": true,
        "strictNullChecks": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "sourceMap": false,
        "baseUrl": "./",
        "types": [
            "node",
            "jest"
        ],
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": ["es2016", "dom", "dom.iterable", "scripthost"]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.vue",
        "tests/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

vue.config.js

const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 80,
    },

    configureWebpack: {
        plugins: [
            new JavaScriptObfuscator ({
                rotateUnicodeArray: true
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName: '[local]_[hash:base64:8]'
                            }
                        }
                    ]
                }
            ]
        }
    }
};

package.json

{
    "name": "tetris",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "animejs": "^2.2.0",
        "axios": "^0.18.0",
        "material-design-icons-iconfont": "^3.0.3",
        "vue": "^2.5.16",
        "vue-property-decorator": "^6.1.0",
        "vue-router": "^3.0.1",
        "vue-status-indicator": "^1.1.0",
        "vuetify": "^1.0.19",
        "vuex": "^3.0.1",
        "vuex-class": "^0.3.1",
        "vuex-router-sync": "^5.0.0"
    },
    "devDependencies": {
        "@types/animejs": "^2.0.0",
        "@types/jest": "^22.0.1",
        "@vue/cli-plugin-babel": "^3.0.0-beta.6",
        "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
        "@vue/cli-plugin-typescript": "^3.0.0-beta.15",
        "@vue/cli-service": "^3.0.0-beta.15",
        "@vue/eslint-config-airbnb": "^3.0.0-rc.3",
        "@vue/eslint-config-prettier": "^3.0.0-beta.6",
        "@vue/eslint-config-typescript": "^3.0.0-rc.3",
        "babel-core": "^7.0.0-0",
        "babel-preset-vue": "^2.0.1",
        "node-sass": "^4.9.0",
        "sass-loader": "^7.0.1",
        "ts-jest": "^22.0.1",
        "vue-template-compiler": "^2.5.16",
        "uglifyjs-webpack-plugin": "latest",
        "webpack-obfuscator": "latest"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}