webpack-assets.json not found, can't figure out to actually create the files
phun-ky opened this issue · 2 comments
phun-ky commented
I have this in my dev-config of webpack:
import webpack from 'webpack';
import _ from 'lodash';
import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin';
const webpackIsomorphicToolsPlugin = new webpack_isomorphic_tools_plugin(
require('./webpack-isomorphic-tools-configuration')
).development(true);
const regular_expressions = {
images : /\.(png|jpg|gif|svg|ico)$/,
fonts: /\.(woff|woff2|eot|ttf)$/,
radars: /(.*\.)?radar.yml$/,
javascript: /\.(js|jsx)$/,
stylus: /\.styl/
};
const baseConfig = require('./base');
const config = _.merge({
progress: true,
debug: true,
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'./src/boot-client'
],
module: {
preLoaders: [{
test: regular_expressions.stylus,
loader: 'stylint'
}],
loaders: [{
test: webpackIsomorphicToolsPlugin.regular_expression('css'),
loader: 'style_loader!css'
},{
test: webpackIsomorphicToolsPlugin.regular_expression('styl'),
loader: 'style-loader!css-loader!stylus-loader'
},{
test: webpackIsomorphicToolsPlugin.regular_expression('fonts'),
loader: 'url-loader?limit=8192&name=[path][name].[ext]?[hash]'
},{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
loader: 'url-loader?limit=8192&name=[path][name].[ext]?[hash]'
},{
test: webpackIsomorphicToolsPlugin.regular_expression('yml'),
loader: 'radar-loader'
}]
},
cache: true,
devtool: 'eval',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
webpackIsomorphicToolsPlugin
]
}, baseConfig);
module.exports = config;
and this is the base config:
const path = require('path');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
const poststylus = require('poststylus');
const port = 8000;
const srcPath = path.join(__dirname, '/../src');
const virtualPath = process.env.BEKKRADAR_VIRTUAL_PATH || '';
const publicPath = virtualPath + '/assets/';
const rootDir = path.join(__dirname, '..');
module.exports = {
port: port,
context: rootDir,
debug: true,
output: {
path: path.resolve(rootDir, 'dist', 'assets'),
filename: 'app.js',
publicPath: publicPath
},
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: port,
publicPath: publicPath,
noInfo: false
},
resolve: {
extensions: ['', '.js', '.jsx','.styl', '.css'],
alias: {
actions: srcPath + '/actions/',
components: srcPath + '/components/',
containers: srcPath + '/containers/',
content: srcPath + '/content/',
store: srcPath + '/store/',
styles: srcPath + '/styles/',
config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
}
},
stylus: {
use: [
poststylus([
autoprefixer({browsers: 'last 2 versions, > 1%'})
])
]
},
stylint: JSON.parse(fs.readFileSync(path.join(__dirname, '../.stylintrc'), 'utf-8'))
};
And this in the isomorphic tools config:
import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin';
import path from 'path';
const srcPath = path.join(__dirname, '/../src');
module.exports = {
debug: true,
alias: {
actions: srcPath + '/actions/',
components: srcPath + '/components/',
containers: srcPath + '/containers/',
content: srcPath + '/content/',
store: srcPath + '/store/',
styles: srcPath + '/styles/',
config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
},
assets:
{
images: {
extensions: ['png', 'jpg', 'gif', 'ico'],
parser: webpack_isomorphic_tools_plugin.url_loader_parser
},
svg: {
extension: 'svg',
parser: webpack_isomorphic_tools_plugin.url_loader_parser
},
fonts: {
extensions: ['woff', 'woff2', 'ttf', 'eot'],
parser: webpack_isomorphic_tools_plugin.url_loader_parser
},
css: {
extension: 'css',
filter: function(module, regular_expression, options, log){
if (options.development){
return webpack_isomorphic_tools_plugin.style_loader_filter(module, regular_expression, options, log);
}
},
path: webpack_isomorphic_tools_plugin.style_loader_path_extractor,
parser: webpack_isomorphic_tools_plugin.css_loader_parser
},
styl: {
extension: 'styl'
},
yml: {
extension: 'yml'
}
}
};
And this is my dev server:
/*eslint no-console:0 */
const webpackIsomorphicTools = require('webpack-isomorphic-tools');
const express = require('express');
const webpack = require('webpack');
const path = require('path');
const rootDir = path.join(__dirname, '..');
const config = require('../webpack.config');
const compiler = webpack(config);
global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../cfg/webpack-isomorphic-tools-configuration'))
.development(true)
.server(rootDir,function(){
const app = new express();
// app.use('/assets', express.static(path.join(__dirname, '../dist/assets')));
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: false,
stats: {
colors: true,
chunks: false,
timings: false,
version: false
},
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(require('../src/boot-server'));
app.get('*', function(req, res) {
res.status(404).send('Server.js > 404 - Page Not Found');
});
app.use((err, req, res) => {
console.error('Error on request %s %s', req.method, req.url);
console.error(err.stack);
res.status(500).send('Server error');
});
process.on('uncaughtException', evt => {
console.log( 'uncaughtException: ', evt );
});
app.listen(config.port, function(error) {
if (error) {
console.error(error);
} else {
console.info('----\n==> 💻 Open up http://localhost:%s/ in your browser.', config.port, config.port);
}
});
}
);
And all I get outputed is the debug info and wait messages, no files produced (I've checked all dirs down and up)
> node -r babel-register servers/server.dev.js --env=dev
[webpack-isomorphic-tools/plugin] [debug] entering development mode
[webpack-isomorphic-tools] [debug] instantiated webpack-isomorphic-tools with options {
"debug": true,
"alias": {
"actions": "/<dir>/src/actions/",
"components": "/<dir>/src/components/",
"containers": "/<dir>/src/containers/",
"content": "/<dir>/src/content/",
"store": "/<dir>/src/store/",
"styles": "/<dir>/src/styles/",
"config": "/<dir>/src/config/dev"
},
"assets": {
"images": {
"extensions": [
"png",
"jpg",
"gif",
"ico"
]
},
"svg": {
"extensions": [
"svg"
]
},
"fonts": {
"extensions": [
"woff",
"woff2",
"ttf",
"eot"
]
},
"css": {
"extensions": [
"css"
]
},
"styl": {
"extensions": [
"styl"
]
},
"yml": {
"extensions": [
"yml"
]
}
},
"webpack_assets_file_path": "webpack-assets.json",
"webpack_stats_file_path": "webpack-stats.json"
}
[webpack-isomorphic-tools] [debug] entering development mode
[webpack-isomorphic-tools] [debug] registering require() hooks for assets
[webpack-isomorphic-tools] [debug] registering a require() hook for *.png
[require-hook] [debug] Hooking into *.png files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.jpg
[require-hook] [debug] Hooking into *.jpg files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.gif
[require-hook] [debug] Hooking into *.gif files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.ico
[require-hook] [debug] Hooking into *.ico files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.svg
[require-hook] [debug] Hooking into *.svg files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.woff
[require-hook] [debug] Hooking into *.woff files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.woff2
[require-hook] [debug] Hooking into *.woff2 files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.ttf
[require-hook] [debug] Hooking into *.ttf files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.eot
[require-hook] [debug] Hooking into *.eot files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.css
[require-hook] [debug] Hooking into *.css files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.styl
[require-hook] [debug] Hooking into *.styl files loading
[webpack-isomorphic-tools] [debug] registering a require() hook for *.yml
[require-hook] [debug] Hooking into *.yml files loading
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
What am I doing wrong here?
catamphetamine commented
Well, I guess that's the same issue as this one:
#23
The .server(rootDir,function(){ method call waits for webpack-assets.json to be generated by the webpack plugin, but since you are running your Webpack inside the callback it never gets called.
app.use(require('webpack-dev-middleware')(compiler, {
I don't see a reason for such a way to run webpack-dev-server.
See, for example react-redux-universal-hot-example
They run a separate webpack-dev-server node.js process
https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/webpack-dev-server.js
They run it as node webpack/webpack-dev-server.js in parallel to the main server script e.g. node main.js
@mattkrick
@bulby97
Full code:
global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../cfg/webpack-isomorphic-tools-configuration'))
.development(true)
.server(rootDir,function(){
const app = new express();
// app.use('/assets', express.static(path.join(__dirname, '../dist/assets')));
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: false,
stats: {
colors: true,
chunks: false,
timings: false,
version: false
},
publicPath: config.output.publicPath
}));
catamphetamine commented
FYI
I'm posting this in every issue and PR to notify whoever may be interested:
today I've released an alternative helper library called universal-webpack.
It takes a different approach than webpack-ismorphic-tools and instead of hacking Node.js require() calls it just compiles all code with target: 'node' webpack configuration option.
As a result, all Webpack plugins and features are supported.
If you think you might need that here's an example project:
https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example