webpack React Module Pars ist fehlgeschlagen mit ReactDOM.render

Question

Nach dem surviveJS E-Book versuche ich eine Webpack-Konfiguration für meine ReactJS-Projekte einzurichten.

Nach meinem Start-Skript ausführen bekomme ich folgende Fehlermeldung:

ERROR in ./app/index.js Module parse failed: /Users/shooshte/PersonalProjects/surviveJS/node_modules/eslint-loader/index.js!/Users/shooshte/PersonalProjects/surviveJS/app/index.js Unexpected token (5:0) You may need an appropriate loader to handle this file type. | | ReactDOM.render(| Hello world, |
document.getElementById('app') |); @ multi (webpack)-dev-server/client? http://localhost:8080 webpack/hot/only-dev-server babel-polyfill ./app

Das ist mein index.js ist:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
<div>Hello world</div>, 
    document.getElementById('app') 
); 

Meine webpack config:

const path = require('path'); 

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackTemplate = require('html-webpack-template'); 
const merge = require('webpack-merge'); 

const parts = require('./webpack.parts'); 

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build') 
}; 

const common = merge(
    { 
    entry: { 
     app: ['babel-polyfill', PATHS.app] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: PATHS.build, 
     filename: '[name].js' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
     template: HtmlWebpackTemplate, 
     title: 'ReactJS Boilerplate', 
     appMountID: 'app', 
     mobile: true, 
     inject: false 
     }) 
    ] 
    }, 
    parts.loadFonts(PATHS.app), 
    parts.loadImages(PATHS.app), 
    parts.lintCSS(PATHS.app), 
    parts.lintJavaScript(PATHS.app) 
); 

module.exports = function(env) { 
    if(env === 'production') { 
    return merge(
     common, 
     { 
     output: { 
      chunkFilename: 'scripts/[chunkhash].js', 
      filename: '[name].[chunkhash].js', 
      // Tweak this to match your GitHub project name 
      publicPath: '/surviveJS/' 
     }, 
     plugins: [ 
      new webpack.HashedModuleIdsPlugin() 
     ] 
     }, 
     parts.setFreeVariable(
     'process.env.NODE_ENV', 
     'production' 
    ), 
     parts.loadJavaScript(PATHS.app), 
     parts.minifyJavaScript(PATHS.app), 
     parts.extractBundles([ 
     { 
      name: 'vendor', 
      entries: ['react'] 
     }, 
     { 
      name: 'manifest' 
     } 
     ]), 
     parts.clean(PATHS.build), 
     parts.generateSourcemaps('source-map'), 
     parts.extractSASS(), 
     parts.purifyCSS(PATHS.app) 
    ); 
    } 
    return merge(
    common, 
    { 
     performance: { 
     hints: false 
     }, 
     plugins: [ 
     new webpack.NamedModulesPlugin() 
     ] 
    }, 
    parts.generateSourcemaps('eval-source-map'), 
    parts.loadSASS(), 
    parts.devServer({ 
     host: process.env.HOST, 
     port: process.env.PORT 
    }) 
); 
}; 

Die relevants Teile des Ersatzteilmoduls:

exports.devServer = function(options) { 
    return { 
    devServer: { 
     historyApiFallback: true, 
     hot: true, 
     hotOnly: true, 
     stats: 'errors-only', 
     host: options.host, // Defaults to `localhost` 
     port: options.port // Defaults to 8080 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin({ 
     }) 
    ] 
    }; 
}; 

exports.lintJavaScript = function(paths) { 
    return { 
    module: { 
     rules: [ 
     { 
      test: /\.js$/, 
      include: paths, 
      use: 'eslint-loader', 
      enforce: 'pre' 
     } 
     ] 
    } 
    }; 
}; 

exports.loadJavaScript = function(paths) { 
    return { 
    module: { 
     rules: [ 
     { 
      test: /\.(js|jsx)$/, 
      include: paths, 

      loader: 'babel-loader', 
      options: { 
      cacheDirectory: true 
      } 
     } 
     ] 
    } 
    }; 
}; 

Dies ist bereits zu groß, aber ich weiß nicht, welcher Teil meiner Webpack-Konfiguration fehlschlägt. Wenn Sie mehr Informationen über das Muster benötigen, überprüfen Sie bitte die gitHub repo.

Answer 1

das Problem gefunden,

Ich war nur Javascript in der Produktionsumgebung geladen, anstatt überall. Umzug loadJavascript zu gemeinsamen Fest meiner Probleme:

const path = require('path'); 

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackTemplate = require('html-webpack-template'); 
const merge = require('webpack-merge'); 

const parts = require('./webpack.parts'); 

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build') 
}; 

const common = merge(
    { 
    entry: { 
     app: ['babel-polyfill', PATHS.app] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: PATHS.build, 
     filename: '[name].js' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
     template: HtmlWebpackTemplate, 
     title: 'ReactJS Boilerplate', 
     appMountID: 'app', 
     mobile: true, 
     inject: false 
     }) 
    ] 
    }, 
    parts.loadJavaScript(PATHS.app), 
    parts.loadFonts(PATHS.app), 
    parts.loadImages(PATHS.app), 
    parts.lintCSS(PATHS.app), 
    parts.lintJavaScript(PATHS.app) 
); 

module.exports = function(env) { 
    if(env === 'production') { 
    return merge(
     common, 
     { 
     output: { 
      chunkFilename: 'scripts/[chunkhash].js', 
      filename: '[name].[chunkhash].js', 
      // Tweak this to match your GitHub project name 
      publicPath: '/surviveJS/' 
     }, 
     plugins: [ 
      new webpack.HashedModuleIdsPlugin() 
     ] 
     }, 
     parts.setFreeVariable(
     'process.env.NODE_ENV', 
     'production' 
    ), 
     parts.minifyJavaScript(PATHS.app), 
     parts.extractBundles([ 
     { 
      name: 'vendor', 
      entries: ['react'] 
     }, 
     { 
      name: 'manifest' 
     } 
     ]), 
     parts.clean(PATHS.build), 
     parts.generateSourcemaps('source-map'), 
     parts.extractSASS(), 
     parts.purifyCSS(PATHS.app) 
    ); 
    } 
    return merge(
    common, 
    { 
     performance: { 
     hints: false 
     }, 
     plugins: [ 
     new webpack.NamedModulesPlugin() 
     ] 
    }, 
    parts.generateSourcemaps('eval-source-map'), 
    parts.loadSASS(), 
    parts.devServer({ 
     host: process.env.HOST, 
     port: process.env.PORT 
    }) 
); 
};