vue-skeleton-webpack-plugin
vue-skeleton-webpack-plugin copied to clipboard
lavas-project
vue-cli3 添加OmmitCSSPlugin插件报错
感谢开发者的开发了这个好用的骨架图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或者一些指导
得通过 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());
都不行
不好意思，我一开始没看清楚报错，你的 OmmitCSSPlugin 是哪个版本呢？
，webpack4 中 Tapable.plugin 被抛弃了，使用 Tapable.hooks 方式
@doudounannan 你好 同样的问题 怎么解决。。。
什么同样的问题，是 引用 OmmitCSSPlugin插件 报错 还是怎么样？
@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 中的例子进行配置。