Javascript 与webpack同构工具集成

我正在尝试开发react同构应用程序，最近我推出了

webpack同构工具
npm包。

我曾尝试按照文档进行操作，但不幸的是，图像和样式文件没有被识别，也没有添加到
webpack assets.json
文件中

到目前为止，我一直使用这种方法：

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

但我知道网页包同构工具更有益

对于SCS和其他样式文件，这是我在运行服务器时遇到的错误：

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

对于图像文件，由于在生成过程中未检测到图像，因此在生成过程中不会显示任何错误。以下是
网页包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（看起来与文档中的非常相似）：

webpack.dev.js（webpack dev服务器配置）：

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")
    ]
};

如果需要更多的代码，我很乐意提供，谢谢
 你找到解决办法了吗？我也面临同样的问题。事实证明，extract text plugin会导致asset not found错误，这是正常的，因为asset是在
捆绑包中加载的。css
，加上我在包含图像时遇到问题，
包含的路径应该是相对的。
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'
  }
};

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")
    ]
};