vue-cli3 添加OmmitCSSPlugin插件报错

[dogsmall]

感谢开发者的开发了这个好用的骨架图npm包,我在使用中有一些问题,希望得到一些帮助 版本 "vue": "^2.5.21","vue-cli":"^3.0.4" 我在dev环境根据vue-cli3的demo使用没有问题,当我发版以后发现首页一直停在骨架图没有不变,猜测是window.STYLE_READY不存在的原因

const app = new Vue({
  components: {
    App
  },
  router,
  store,
  render: h => h(App)
});
window.mountApp = () => {
  app.$mount("#app");
};
if (process.env.NODE_ENV === "production") {
  if (window.STYLE_READY) {
    window.mountApp();
  }
} else {
  window.mountApp();
}

后来阅读了 https://zhuanlan.zhihu.com/p/34550387这篇文章,按照文章所说,添加了OmmitCSSPlugin,本地编译就会报错 错误如下图

plugin.js

module.exports = class OmmitCSSPlugin {
  constructor() {}

  apply(compiler) {
    compiler.plugin("compilation", compilation => {
      compilation.plugin("html-webpack-plugin-alter-asset-tags", (args, cb) => {
        args.head = args.head.filter(
          link => link.attributes.rel !== "stylesheet"
        );
        cb(null, args);
      });
    });
  }
};

vue.config.js

const path = require("path");
// const SkeletonWebpackPlugin = require('../../lib');
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OmmitCSSPlugin = require("./plugin.js");
module.exports = {
  configureWebpack: {
    externals: {
    },
    plugins: [
      // new UglifyJsPlugin({
      //   uglifyOptions: {
      //     compress: {
      //       warnings: false,
      //       drop_console: true,
      //       drop_debugger: true
      //     },
      //     output: {
      //       // 去掉注释内容
      //       comments: false
      //     }
      //   },
      //   sourceMap: false,
      //   parallel: true
      // }),
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, "./src/skeleton.js")
          }
        },
        minimize: true,
        quiet: true
      }),
      new OmmitCSSPlugin()
    ]
  },
  chainWebpack: config => {
    // const oneOfsMap = config.module.rule("scss").oneOfs.store;
    // oneOfsMap.forEach(item => {
    //   item
    //     .use("sass-resources-loader")
    //     .loader("sass-resources-loader")
    //     .options({
    //       resources: ["./src/assets/css/index.scss"]
    //     })
    //     .end();
    // });
    // 行内px2vw
    config.module
      .rule("vue")
      .test(/\.vue$/)
      .use("style-vw-loader")
      .loader("style-vw-loader")
      .options({
        unitToConvert: "px",
        viewportWidth: 375,
        unitPrecision: 3,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        minPixelValue: 1
      });
  },

  devServer: {
    proxy: ""
  },
  css: {
    loaderOptions: {
      stylus: {
        "resolve url": true,
        import: ["./src/theme"]
      },
      sass: {
        data: `@import "@/assets/css/index.scss";`
      }
    }
  },

  pluginOptions: {
    "cube-ui": {
      postCompile: true,
      theme: true
    }
  }
};

示例中是webpack4的,但是vue-cli3把webpack4封装了,所以不知道该如何使用,希望能给个demo或者一些指导

[negativeentropy9]

得通过 chainwebpack吧

[dogsmall]

得通过 chainwebpack吧

谢了 但是能说下具体的操作吗?我试了好几个都不行

  chainWebpack: config => {
    // config.optimization.minimizer("html").use(OmmitCSSPlugin);
    config.plugin("ommit-css-webpack-plugin").use(OmmitCSSPlugin);
    // config
    //   .plugin("ommit-css-webpack-plugin")
    //   .init(OmmitCSSPlugin => new OmmitCSSPlugin());

都不行

[negativeentropy9]

不好意思，我一开始没看清楚报错，你的 OmmitCSSPlugin 是哪个版本呢？ ，webpack4 中 Tapable.plugin 被抛弃了，使用 Tapable.hooks 方式

[ZhengXiaowei]

@doudounannan 你好 同样的问题 怎么解决。。。

[negativeentropy9]

@doudounannan 你好 同样的问题 怎么解决。。。

什么同样的问题，是 引用 OmmitCSSPlugin插件 报错 还是怎么样？

[ZhengXiaowei]

@doudounannan 对 引用ommitcssplugin 报plugin弃用 要改hooks的错误 然后不知道如何处理了

[negativeentropy9]

@ZhengXiaowei @dogsmall

非常抱歉，之前没有仔细看问题。上面贴的知乎文章和这个 vue-skeleton-webpack-plugin 解决的是 2 个不同的场景。

知乎文章解决的问题是 FOUC，保证挂载组件在 下载成功 style 之后进行。大多数应用都是使用 webpack 进行构建，很多使用 html-webpack-plugin 来动态插入 js 和 通过 mini-css-extract-plugin 提取 的 css 文件。知乎文章所述需要手动添加 link 引用，并且执行挂载操作，所以需要在 html-webpack-plugin 插入 js/css 标签时 过滤掉 css(文中提到的 自定义 OmmitCSSPlugin 插件)。

而 vue-skeleton-webpack-plugin 的作用是指定 skeleton 模板来生成 骨架屏。可参考 examples 中的例子进行配置。

[ZhengXiaowei]

@doudounannan 那这样确实没问题 就是骨架完进入项目里显示真实页面的时候 还会有个空白期 看知乎文章 解决的好像是这个问题