E:\git\my-vue-scaffold\node_modules\memory-fs\lib\MemoryFileSystem.js:114 throw new MemoryFileSystemError(errors.code.ENOENT, _path); ^ Error: no such file or directory

xiaobinwu commented 6 years ago

引入vue-skeleton-webpack-plugin插件，执行，却报memory-fs读取不到文件，显示file不存在，排查了一下最终生成的webpack.skeleton.conf生成的对象，如下： { target: 'node', devtool: false, entry: './src/skeleton/foo/entry-skeleton.js', output: { path: 'E:\\git\\my-vue-scaffold\\dist', libraryTarget: 'commonjs2', filename: 'skeleton-foo.js' }, resolve: { extensions: [ '.js', '.json', '.vue', '.scss', '.css' ], alias: { '~': 'E:\\git\\my-vue-scaffold\\src', 'vue$': 'vue/dist/vue.esm.js' }, modules: [ 'E:\\git\\my-vue-scaffold\\src', 'node_modules' ] }, module: { rules: [ [Object], [Object], [Object] ] }, externals: [Function], plugins: [ ExtractTextPlugin { filename: 'skeleton-foo.css', id: 2, options: {} } ] }，以及打印出outputPath、outputCssPath，如下： E:\git\my-vue-scaffold\dist\skeleton-foo.js E:\git\my-vue-scaffold\dist\skeleton-foo.css，感觉没什么问题为什么还会报这错呢，作者有空的话帮忙解惑一下呢。 github地址： https://github.com/xiaobinwu/my-vue-scaffold

xiaobinwu commented 6 years ago

srr.js 文件var serverCompiler = webpack(serverWebpackConfig, (err, stats) => { if (err || stats.hasErrors()) { console.log(err) } console.log('success') }); 打印出来的是success

bundle也能获取得到

node -v v6.11.3

npm -v 3.10.10

xiaobinwu commented 6 years ago

webpack.skeleton.config.js

const { resolve } = require('path') const nodeExternals = require('webpack-node-externals') const ExtractTextPlugin = require("extract-text-webpack-plugin") const glob = require('glob') const entryJsList = {} const entries = glob.sync('./src/skeleton/*/entry-skeleton.js') for (const path of entries) { const chunkName = path.slice('./src/skeleton/'.length, -'/entry-skeleton.js'.length) entryJsList[chunkName] = resolve(__dirname, path) }

console.log(entryJsList)

module.exports = { target: 'node', devtool: false, entry: entryJsList, output: { path: resolve(dirname, 'dist'), filename: 'static/js/[name].js', libraryTarget: 'commonjs2' }, resolve: { extensions: ['.js', '.json', '.vue'], alias: { '~': resolve(dirname, 'src'), vue$: 'vue/dist/vue.esm.js' } }, module: { rules: [ { enforce: 'pre', test: /.vue$/, loader: 'eslint-loader', exclude: /node_modules/ }, { test: /.js$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'] }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { sass: ExtractTextPlugin.extract({ use: 'css-loader!sass-loader', fallback: 'vue-style-loader' }) } } } ] }, externals: nodeExternals({ whitelist: /.css$/ }), plugins: [] }

xiaobinwu commented 6 years ago

解决了呢

xiaoiver commented 6 years ago

CSS 样式文件是用 ExtractWebpackPlugin 从 JS 里提取出来的。而这个插件根据 Webpack 宿主环境 2.x或者3.x 也有两个对应的版本 2.x.x 和 3.x.x。所以我们这个插件也需要根据项目的 Webpack 版本选择 0.x.x(Webpack 2) 或者 1.x.x(Webpack 3)。

否则可能存在以下的问题：原项目已经安装了 2.x.x 的 ExtractWebpackPlugin，而安装这个插件时又安装了 3.x.x 的ExtractWebpackPlugin。这样两个版本的依赖同时存在，从 MemoryFS 里就找不着样式文件了。

不过这是插件早期存在的问题，现在通过 package.json 的 peerDependencies，安装插件时发现不匹配是会在控制台给出提示的。