javascript - 使用 HtmlWebpackPlugin 时 purify-webpack 插件出错

Question

我正在使用 purifycss-webpack 插件来从我的 webpack 构建中删除未使用的 css。一点上下文，我们的应用程序根据使用 System.import 的路由分成 block 。此外，我使用 .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，那么您可以使用 styleExtensions: ['.scss'] 在 PurifyCssPlugin 中。

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