Konfigurieren Sie reagieren Webpack für die Bereitstellung

Question

brauchen ein wenig Hilfe. Wir hatten versucht, ein Reaktionsprojekt zu implementieren, aber wir können es nicht konfigurieren.

Wir verwenden: es6, webpack, redux, reagieren, babel.

dies ist webpack Basis:

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 

export default { 
    entry: './app/app.js', 
    output: { 
    path: './app/App/dist', 
    filename: '/bundle.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     loader: 'json', 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('css!sass'), 

     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('css!sass'), 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'babel?presets[]=es2015,presets[]=react!svg-react', 
     }, 
    ], 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: './app/App/index.html', 
    }), 
    new ExtractTextPlugin('/app/App/css/default.css', { 
     allChunks: true, 
    }), 
    ], 
}; 

webpack dev:

import webpack from 'webpack'; 
import baseConfig from './webpack.config.base'; 

const config = { 
    ...baseConfig, 
    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    plugins: [ 
    ...baseConfig.plugins, 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    devServer: { 
    colors: true, 
    historyApiFallback: true, 
    inline: true, 
    hot: true, 
    }, 
}; 
export default config; 

webpack prod:

import webpack from 'webpack'; 
import baseConfig from './webpack.config.base'; 

const config = { 
    ...baseConfig, 
    plugins: [ 
    ...baseConfig.plugins, 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('production'), 
     }, 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     screw_ie8: true, 
     warnings: false, 
     }, 
    }), 
    ], 
}; 
export default config; 

Dies ist unsere eigentliche webpack, versuchen wir, das Projekt zu implementieren mit Es funktioniert aber nicht.

Hat jemand eine Idee, wie man es konfiguriert?

Answer 1

sicher, dass ich denke, der schnellste Weg, um Ihr Problem zu lösen, ist auf diesen Link klicken:

React starter kit

und wählen Sie alle Starter, die Ihre Technologien zusammenbringt!

Ich glaube, Sie für diese suchen: react-boilerplate

Answer 2

Also, es ist ein Server-Problem wahrscheinlich. Sie benötigen einen HTTP-Server, um die statischen Dateien (im Prinzip Ihre App) zu verwalten. Ich empfehle das Ngxin, sehr einfach zu konfigurieren und zu verwenden.

Löschen Sie nach der Installation von nginx die Datei /etc/nginx/sites-enable/default und erstellen Sie eine neue Datei (Sie können den gewünschten Namen hier verwenden). Hier ist die Konfiguration Ich verwende:

server { 
    listen 80; 
    listen [::]:80; 

    server_name example.com; 

    location/{ 
     root /var/html/myProject/; 
     try_files $uri /index.html; 
    } 
} 

danach neu starten nginx und sollten bereit sein zu gehen.

für webpack, ich habe eine einfachere Konfiguration, die gut funktioniert:

const path = require("path"); 
const webpack = require("webpack"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const isProd = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() == 'production'; 

const plugins = [ 
    new ExtractTextPlugin(isProd ? 'bundle.[hash].css' : 'bundle.css', { allChunks: true }), 
    new HtmlWebpackPlugin({ 
    template: 'index.html', 
    inject: 'body', 
    filename: 'index.html' 
    }), 
    new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
    }) 
]; 

const prodPlugins = [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin() 
]; 

module.exports = { 
    devtool: isProd ? 'cheap-module-source-map' : 'eval', 
    entry: [ 
    './src/index.jsx' 
    ], 
    output: { 
    path: isProd ? path.join(__dirname, 'dist') : __dirname, 
    publicPath: '/', 
    filename: isProd ? 'bundle.[hash].js' : 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }, 
    { 
     test: /\.(scss|css|sass)$/, 
     loader: ExtractTextPlugin.extract('css!sass') 
    }, 
    { 
     test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url' 
    }, 
    { 
     test: /\.html$/, 
     loader: 'html' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    }, 
    plugins: isProd ? prodPlugins.concat(plugins) : plugins 
}; 

Einige Punkte:

• Ich SASS mit
• Überprüfen Sie die vor laufen etwas in den Weg
• Um für die Produktion zu kompilieren, führen Sie einfach NODE_ENV=production webpack -p
• Ich benutze ein paar Plugins für Ugli fy JS und komprimiere Dateien.

Ich denke, das ist es! Prost!