錯誤與淨化-的WebPack插件使用HtmlWebpackPlugin

Question

我才能從我的WebPack構建刪除未使用的CSS使用purifycss-webpack插件時。一點背景知識，我們的應用程序被分爲基於使用System.import的航線塊。另外，我生成使用.ejs模板使用HtmlWebpackPlugin內置HTML。

插件配置

{ 
plugins: [ 
    // clean build dir on every compilation 
    new CleanWebpackPlugin(cleanPaths, cleanOptions), 
    // replaces moment/locale/*.js to retrieve only the en locale 
    new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), 
    // Minify and optimize the JavaScript 
    new webpack.optimize.UglifyJsPlugin({ 
     options: { 
     quiet: true 
     }, 
     beautify: false, 
     mangle: { 
     screw_ie8: true, 
     keep_fnames: true 
     }, 
     compress: { 
     screw_ie8: true 
     }, 
     comments: false 
    }), 

    new OptimizeJsPlugin({ 
     sourceMap: false 
    }), 

    // Minify and optimize the index.html 
    new HtmlWebpackPlugin({ 
     template: "app/index.ejs", 
     inject: true 
    }), 

    // Extract the CSS into a seperate file 
    extractCss, 
    extractVendor, 
    // create a basic vendor chunk which is not fancy 
    new CommonsChunkPlugin({ 
     name: "vendor" 
    }), 

    // extract the webpack runtime into a seperate chunk for long term caching 
    new CommonsChunkPlugin({ 
     name: "manifest", 
     minChunks: Infinity 
    }), 
    // extract all common modules from chunks into a seperate chunk 
    new CommonsChunkPlugin({ 
     name: "main", 
     async: "common-async", 
     children: true, 
     minChunks: 2 
    }), 
    // injects webpack stats into index.html after seperarating them from the runtime 
    // useful for long term caching 
    /* 
    // unsolved problem, cannot extract a json file and move it into html file 
    // without needing three plugins 
    new ChunkManifestPlugin({ 
     filename: "chunk-manifest.json", 
     manifestVariable: "webpackManifest", 
     inlineManifest: true 
    }), 
    */ 
    // analyze bundle size visually to determine any issues 
    new PurifyCssPlugin({ 
     paths: [path.join("./app/index.ejs")], 
     moduleExtensions: [".html"], 
     verbose: true, 
     purifyOptions: { 
     whitelist: ["*purify*"] 
     } 
    }), 
    new BundleAnalyzerPlugin({ 
     analyzerMode: process.env.BUNDLE_ANALYZER_MODE, 
     reportFilename: "perf/report.html", 
     generateStatsFile: true, 
     statsFilename: "perf/stats.json" 
    }), 
    // add gzip compression as part of the webpack output 
    new CompressionPlugin({ 
     asset: "[path].gz[query]", 
     algorithm: "gzip", 
     test: /\.(js|css|html)$/, 
     threshold: 0, 
     minRatio: 0.8 
    }) 
    ] 
} 

錯誤

Error: undefined:30:2: missing '}' 
    at error (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:62:15) 
    at declarations (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:259:26) 
    at rule (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:560:21) 
    at rules (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:117:70) 
    at stylesheet (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:81:21) 
    at module.exports (/Users/localuser/lendi/lendi-app/node_modules/css/lib/parse/index.js:564:20) 
    at rework (/Users/localuser/lendi/lendi-app/node_modules/rework/index.js:27:21) 
    at CssTreeWalker.beginReading (/Users/localuser/lendi/lendi-app/node_modules/purify-css/lib/purifycss.js:568:24) 
    at purify (/Users/localuser/lendi/lendi-app/node_modules/purify-css/lib/purifycss.js:1009:10) 
    at /Users/localuser/lendi/lendi-app/node_modules/purifycss-webpack/dist/index.js:95:99 
    at Array.forEach (native) 
    at /Users/localuser/lendi/lendi-app/node_modules/purifycss-webpack/dist/index.js:81:28 
    at Array.forEach (native) 
    at Compilation.<anonymous> (/Users/localuser/lendi/lendi-app/node_modules/purifycss-webpack/dist/index.js:65:30) 
    at next (/Users/localuser/lendi/lendi-app/node_modules/tapable/lib/Tapable.js:140:14) 
    at ExtractTextPlugin.<anonymous> (/Users/localuser/lendi/lendi-app/node_modules/extract-text-webpack-plugin/index.js:341:4) 
    at next (/Users/localuser/lendi/lendi-app/node_modules/tapable/lib/Tapable.js:140:14) 
    at ExtractTextPlugin.<anonymous> (/Users/localuser/lendi/lendi-app/node_modules/extract-text-webpack-plugin/index.js:341:4) 
    at Compilation.applyPluginsAsyncSeries (/Users/localuser/lendi/lendi-app/node_modules/tapable/lib/Tapable.js:142:13) 
    at sealPart2 (/Users/localuser/lendi/lendi-app/node_modules/webpack/lib/Compilation.js:631:9) 
    at next (/Users/localuser/lendi/lendi-app/node_modules/tapable/lib/Tapable.js:138:11) 
    at ExtractTextPlugin.<anonymous> (/Users/localuser/lendi/lendi-app/node_modules/extract-text-webpack-plugin/index.js:313:5) 
    at /Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:421:16 
    at iteratorCallback (/Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:998:13) 
    at /Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:906:16 
    at /Users/localuser/lendi/lendi-app/node_modules/extract-text-webpack-plugin/index.js:297:6 
    at /Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:421:16 
    at iteratorCallback (/Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:998:13) 
    at /Users/localuser/lendi/lendi-app/node_modules/async/dist/async.js:906:16 
    at /Users/localuser/lendi/lendi-app/node_modules/extract-text-webpack-plugin/index.js:287:9 
error Command failed with exit code 1. 

Answer 1

錯誤貌似相關的樣式解析驗證自己的風格文件，如果你正在使用的CSS，如果您正在使用.scss那麼您可以在PurifyCssPlugin使用styleExtensions: ['.scss']。

new PurifyCssPlugin({ 
     paths: [path.join("./app/index.ejs")], 
     styleExtensions: ['.scss'], 
     moduleExtensions: [".html"], 
     verbose: true, 
     purifyOptions: { 
     whitelist: ["*purify*"] 
     } 
    })