javascript - webpack-isomorphic-tools との統合

Question

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

イメージファイルの場合、ビルドでイメージが検出されないため、ビルド中にエラーは表示されません。ここにあるwebpack-assets.js：

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

関連コード:
webpack-isomorphic-tools-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 構成):

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

さらにコードが必要な場合は、喜んで提供します。ありがとう!

javascript - webpack-isomorphic-tools との統合

0 に答える 0

Related

Reference