如何才能配置成功啊？失败N次了。

[nwtown]

单页面
node_modules\memory-fs\lib\MemoryFileSystem.js:114
throw new MemoryFileSystemError(errors.code.ENOENT, _path);

就报这个错。快疯了。求解

[PengXing]

能再详细点吗？

[xiaoiver]

给 Skeleton 使用的 Webpack 配置，由于需要把 Skeleton.vue 里用到的 CSS 从 JS 里分离出来，所以必须要使用 ExtractTextPlugin 这个插件。

如果你是用 vue-cli 创建的项目，默认情况下只有在 production 模式下才会开启这个插件。如果你给 Skeleton 使用的 Webpack 配置不作任何修改，只是简单 merge webpack.base.conf，在 development 模式下就会出错。

这里有一个示例项目，也是用 vue-cli 创建的。
注意这一段，开启了样式分离：

// webpack.skeleton.conf

// 开启 Skeleton 的样式分离
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
}),

这是实际效果

[nwtown]

谢谢，我去试试 。刚接触webpack 以前就是cli后也没改过。

[nwtown]

项目使用了vux,配置完vux-loader后就会提示
‘’‘
TypeError: Cannot set property 'loaders' of undefined
at Object. (E:\webroot\multi-skeleton-demo\build\webpack.skeleton.conf.js:34:55)
’‘’
我也是醉了。。 这插件用的人很少？ 找不到有用的信息。

[xiaoiver]

@nwtown ，先别醉。。。建议先了解一下 Webpack 关于模块的配置以及样式分离。这对于你理解 Webpack Loader 和插件机制，在项目中更灵活地使用都是有帮助的。

在 vue-cli 的创建的项目中，关于 .vue 文件的规则定义在数组中的第一个：

// build/webpack.base.conf.js

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }

默认只在 production 模式开启样式分离：

// build/vue-loader.conf.js

loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  })

给 Skeleton 用的配置文件继承自 webpack.base.conf.js，所以如果你什么都不改，是分离不出样式的。
所以我们需要修改针对 .vue 文件的解析规则，在模板项目中是module.rules数组中的第一个：

// webpack.skeleton.conf

// 开启 Skeleton 的样式分离
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
})

而你如果用了 vux-loader 或者其他第三方 Loader，数组的顺序是有可能改变的哦。你的问题就出在这里，你需要找到 .vue 规则在数组中的位置，不妨把整个 Webpack 配置对象打出来看看。

当然你如果想省事，不在乎开发模式下的性能，可以改成开发和生产环境都开启样式分离：

// build/vue-loader.conf.js

loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true // isProduction
  })

希望对于你理解为啥这么做有帮助。

[nwtown]

@xiaoiver 感谢这么详细的回复，受教了，我去弄。再有问题再请教！ 您是一个好人。

[ghost]

我也很绝望啊。。。。已经开启extract: true

[liverwang]

@ziming98 注意dev换行开启样式分离后，需要再webpack.dev.conf.js文件中完善extract-text-webpack-plugin插件的配置，具体可以直接拷贝webpack.prod.conf.js的配置
const ExtractTextPlugin = require('extract-text-webpack-plugin')

new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true, })

[liverwang]

建议你可以尝试将【vue-loader.conf.js】文件中的loaders配置直接改成 loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: true // 因为使用Skeleton，需要分离样式文件，这里直接选择true }), 因为在【webpack.skeleton.conf.js】中修改的[0]有可能是第一个了 skeletonWebpackConfig.module.rules[0].options.loaders Best Regards Liver.Wang @小木匠 Mail: [email protected]

…

________________________________ 发件人: LNyears <[email protected]> 发送时间: 2018年6月8日 4:00 收件人: lavas-project/vue-skeleton-webpack-plugin 抄送: liverwang; Comment 主题: Re: [lavas-project/vue-skeleton-webpack-plugin] 如何才能配置成功啊？失败N次了。 (#11) webpack.skeleton.conf.js文件完整配置如下： 'use strict'; const path = require('path') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const nodeExternals = require('webpack-node-externals') const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap function resolve(dir) { return path.join(__dirname, dir) } let skeletonWebpackConfig = merge(baseWebpackConfig, { target: 'node', devtool: false, entry: { app: resolve('../src/Skeleton/entry-skeleton.js') }, output: Object.assign({}, baseWebpackConfig.output, { libraryTarget: 'commonjs2' }), externals: nodeExternals({ whitelist: /.css$/ }), plugins: [] }) // important: enable extract-text-webpack-plugin skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: true }), module.exports = skeletonWebpackConfig webpack.dev.conf.js 文件关于骨架的配置如下： // inject skeleton content(DOM & CSS) into HTML new SkeletonWebpackPlugin({ webpackConfig: require('./webpack.skeleton.conf'), quiet: true, minimize: true, router: { mode: 'history', routes: [ // { // path: '', // skeletonId: 'skeleton-investmentfinancehome' // }, { path: '', skeletonId: 'skeleton1' }, { path: '/InvestmentFinance', skeletonId: 'skeleton-investmentfinancehome' }, { path: '/InvestmentFinance/FinanceSubMenu/more', skeletonId: 'skeleton-financesubmenu-more' }, { path: '/InvestmentFinance/WalletHome', skeletonId: 'skeleton-wallethome' } ] } }), 老师麻烦帮忙看看，在线等，谢谢！ ― You are receiving this because you commented. Reply to this email directly, view it on GitHub<#11 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AE055w8TO4YXeEgU7jcEPqCE48MJ9ZRMks5t6fbdgaJpZM4TAb9J>.

[BryanAdamss]

我也很绝望啊。。。。已经开启extract: true

开启后，遇到同样问题

[lazcy]

按照文章提到的方式配置了，运行也没有问题，但是看不到骨架屏的效果，为啥呢

[sechours]

[ihamlet]

我跟你一样出现了这样的问题
将样式当做变量运行了 按照楼上配置一上午

[chencmgithub]

怎么解决？？dev模式下没问题，pro模式下就报错，关闭 usePostCSS: false就OK。但是这样的话postCSS就用不了，项目中需要将px转为rem。