どのようにwebpackと反応するアプリを準備する

Question

私はReactとWebpackとこれらすべてのものに慣れています。 Webpackを使ってReactアプリケーションを作成し、webpack-dev-serverを使って自分のアプリケーションを作成してデバッグしました。私webpack.config.js中のSO

私はこのコードを持っているファイル：

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : false, 
    entry: "./js/client.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
     } 
     }, 
     { 
     test: /\.scss$/, 
     use: debug ? [{ 
      loader: "style-loader" // creates style nodes from JS strings 
     }, { 
      loader: "css-loader" // translates CSS into CommonJS 
     }, { 
      loader: "sass-loader" // compiles Sass to CSS 
     }] : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "client.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new ExtractTextPlugin('style.min.css'), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
    externals: { 
    "jquery": "jQuery", 
    "react": "React", 
    "react-dom": "ReactDOM", 
    "animejs": "anime" 
    } 
}; 

私はWebPACKの-devのサーバー--contentベースSRC --inline --hotを使用する場合、私は私のアプリを見ますlocalhost：8080で作業していますが、今はそのアプリケーションをプロダクション用に準備したいと思っています。そこで私は端末でこれらのコードを実行しました：

$: NODE_ENV=production 
$: webpack 

何も変わりません！だから最初の質問：何が間違ってNODE_ENV=productionとは何ですか？ウェブパックの最初の行をvar debug = process.env.NODE_ENV === "production"; //falseに変更すると動作します。

その他の問題があります。 私はSassを使用しています。debug === falseと私のブラウザでindex.htmlファイルを開くと、私のスタイルはコンパイルされません！

{ 
    test: /\.scss$/, 
    use: debug ? [{ 
     loader: "style-loader" // creates style nodes from JS strings 
    }, { 
     loader: "css-loader" // translates CSS into CommonJS 
    }, { 
     loader: "sass-loader" // compiles Sass to CSS 
    }] : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) 
} 

そして最後の問題は、絶対パスである：ちょうど私のSASSコードのすべての問題は、コードのこの部分であるべきstyle.min.cssファイルにコピーされます！私はWebPACKの-devのサーバーを使用しますが、私はWebPACKのを使用する場合、それは私のLinuxのルートから、それを開こうとして、画像が見つからない場合

<img src="/images/avatar.jpg"> 

それは動作します：私は私のアプリでこのコードを持っています。

したがって、これらは私の質問です：NODE_ENV =生産が動作しない理由を

1. ？
2. 私はsassをコンパイルし、CSSをstyle.min.cssに入れるべきですか？
3. アプリで絶対パスを使用するにはどうすればよいですか？

事前のおかげで

Answer 1

にはどうすればSASSをコンパイルし、style.min.cssでCSSを置く必要がありますか？

てみコンフィグ

{ 
    test: /\.scss$/, 
    use: debug ? [{ 
     loader: "style-loader" // creates style nodes from JS strings 
    }, { 
     loader: "css-loader" // translates CSS into CommonJS 
    }, { 
     loader: "sass-loader" // compiles Sass to CSS 
    }] : ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: [ 
         { 
          loader: "css-loader", 
          options: { 
           modules: true, 
          }, 
         }, 
         { 
          loader: "sass-loader", 
          options: { 
           modules: true, 
          }, 
         }, 
        ], 
       }), 
      }, 

がどのように私は私のアプリでは、絶対パスを使用することができ、次の？

リアクションアプリでイメージを読み込むより良い方法は、webpackのファイルローダーを使用して、他のモジュールを読み込むようにアプリケーションでイメージを直接読み込むことです。最初のWebPACK

output: { 
    path: __dirname + "/src/", 
    publicPath: "http://localhost:3000/static", // Your server public path 
    filename: "client.min.js" 
    }, 

に、あなたのサーバの公開パスをこの

{ 
    test: /\.(jpg|png)$/, 
    loader: "file-loader", 
}, 

ようWebPACKの中で、ファイル・ローダーを追加し、直接に画像をインポートし、この

import avatar from "../images/avatar.jpg"; 

<img src={avatar} />