与webpack-isomorphic工具集成

我试图开发一个反应同构的应用程序，我最近想出了webpack-isomorphic-tools npm包。
我试图按照文档，但不幸的是，图像和样式文件不被识别，并没有被添加到webpack-assets.json文件。

直到现在我已经使用这种方法：

 if(process.env.BROWSER){ include('./style.scss'); } 

但是我明白webpack-isomorphic-tools更有用。

对于scss和其他样式文件，这是运行服务器时出现的错误：

 [webpack-isomorphic-tools] [debug] requiring ./shared/Root.scss [webpack-isomorphic-tools] [error] asset not found: ./shared/Root.scss 

对于图像文件，在构build期间不显示错误，因为在构build上没有检测到图像。 这里是webpack-assets.js ：

 { "javascript": { "main": "/build/bundle.js" }, "styles": {}, "assets": {} } 

相关代码：
的WebPack同构的工具-config.js：

 var webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin'); module.exports = { debug: true, webpack_assets_file_path : 'public/build/webpack-assets.json', webpack_stats_file_path : 'public/build/webpack-stats.json', assets: { images: { extensions: ['png', 'jpg', 'gif', 'ico', 'svg'] }, fonts: { extensions: ['woff', 'woff2', 'eot', 'ttf'] }, styles: { extensions: ['scss', 'less', 'css'], filter(module, regular_expression, options, log) { if (options.development) { // In development mode there's Webpack "style-loader", // which outputs `module`s with `module.name == asset_path`, // but those `module`s do not contain CSS text. // // The `module`s containing CSS text are // the ones loaded with Webpack "css-loader". // (which have kinda weird `module.name`) // // Therefore using a non-default `filter` function here. // return webpack_isomorphic_tools_plugin.style_loader_filter(module, regular_expression, options, log) } // In production mode there will be no CSS text at all // because all styles will be extracted by Webpack Extract Text Plugin // into a .css file (as per Webpack configuration). // // Therefore in production mode `filter` function always returns non-`true`. }, // How to correctly transform kinda weird `module.name` // of the `module` created by Webpack "css-loader" // into the correct asset path: path: webpack_isomorphic_tools_plugin.style_loader_path_extractor, // How to extract these Webpack `module`s' javascript `source` code. // Basically takes `module.source` and modifies its `module.exports` a little. parser: webpack_isomorphic_tools_plugin.css_loader_parser } } } 

index.js （看起来很像文档中的那个）：

 'use strict'; var path = require('path'); require('babel-register'); require('babel-polyfill'); require('app-module-path').addPath(path.join(__dirname,'shared')); global._development_ = false if (process.env.NODE_ENV !== 'production'){ global._development_ = true; } var Webpack_isomorphic_tools = require('webpack-isomorphic-tools'); // this must be equal to your Webpack configuration "context" parameter var project_base_path = path.resolve(__dirname); // this global variable will be used later in express middleware global.webpack_isomorphic_tools = new Webpack_isomorphic_tools(require('./webpack-isomorphic-tools-config')) // enter development mode if needed // (you may also prefer to use a Webpack DefinePlugin variable) .development(!(process.env.NODE_ENV === 'production')) // initializes a server-side instance of webpack-isomorphic-tools // (the first parameter is the base path for your project // and is equal to the "context" parameter of you Webpack configuration) // (if you prefer Promises over callbacks // you can omit the callback parameter // and then it will return a Promise instead) .server(project_base_path, function() { // webpack-isomorphic-tools is all set now. // here goes all your web application code: // (it must reside in a separate *.js file // in order for the whole thing to work) require('./server/server') }); 

webpack.dev.js （webpack-dev-server config）：

 var path = require('path'); var webpack = require('webpack'); var Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin') var webpack_isomorphic_tools_plugin = // webpack-isomorphic-tools settings reside in a separate .js file // (because they will be used in the web server code too). new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-config')) // also enter development mode since it's a development webpack configuration // (see below for explanation) .development(); module.exports = { context: __dirname, entry: ['webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './client/index.jsx'], resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, output: { path: path.join(__dirname, 'public', 'build'), filename: 'bundle.js', publicPath: "/build/" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }, { test: /\.css$/, loader: "style-loader!css-loader!autoprefixer-loader" }, { test: /\.less$/, loader: "style-loader!css-loader!autoprefixer-loader!less-loader" }, { test: /\.scss$/, loader: "style-loader!css-loader!autoprefixer-loader!sass-loader" }, { test: webpack_isomorphic_tools_plugin.regular_expressions['images'], loader: "url-loader?limit=10240" }, { test: webpack_isomorphic_tools_plugin.regular_expression['fonts'], loader: "url-loader?limit=10240" } ] }, plugins: [ new webpack.DefinePlugin({ "process.env": { BROWSER: JSON.stringify(true), NODE_ENV: JSON.stringify( process.env.NODE_ENV || 'development' ) } }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), webpack_isomorphic_tools_plugin ], devtool: 'inline-source-map', devServer: { hot: true, proxy: { '*': 'http://127.0.0.1:' + (process.env.PORT || 3000) }, host: '127.0.0.1' } }; 

webpack.config.js ：

 var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin') var webpack_isomorphic_tools_plugin = // webpack-isomorphic-tools settings reside in a separate .js file // (because they will be used in the web server code too). new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-config')); module.exports = { context: __dirname, entry: ['./client/index.jsx'], resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, output: { path: path.join(__dirname, 'public', 'build'), filename: 'bundle.js', publicPath: "/build" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader") }, { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader") }, { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader") }, { test: /\.gif$/, loader: "url-loader?limit=10000&mimetype=image/gif" }, { test: /\.jpg$/, loader: "url-loader?limit=10000&mimetype=image/jpg" }, { test: /\.png$/, loader: "url-loader?limit=10000&mimetype=image/png" }, { test: /\.svg/, loader: "url-loader?limit=26000&mimetype=image/svg+xml" }, { test: /\.(woff|woff2|ttf|eot)/, loader: "url-loader?limit=1&name=/[hash].[ext]" } ] }, plugins: [ new webpack.DefinePlugin({ "process.env": { BROWSER: JSON.stringify(true), NODE_ENV: JSON.stringify( process.env.NODE_ENV || 'development' ) } }), new ExtractTextPlugin("bundle.css") ] }; 

如果需要更多的代码，我会很高兴给它，谢谢！