WebPack React模块解析失败

Question

继幸存的JS电子书我试图设置我的ReactJS项目webpack配置。

在运行我的开始脚本时，我得到以下错误：

./app/index.js模块解析失败时出错：/Users/shooste/PersonalProjects/surviveJS/node_modules/eslint loader/index.js/Users/shooshte/PersonalProjects/surviveJS/app/index.js意外标记（5:0）您可能需要适当的加载程序来处理此文件类型。|ReactDOM.render（| Hello world，|
document.getElementById（'app'）|）；@多（网页包）-开发服务器/客户端？http://localhost:8080 webpack/hot/仅开发服务器babel polyfill./app

这是我的index.js：

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

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

我的webpack配置：

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

零件模块的相关零件：

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

这已经太大了，但我不知道我的网页配置的哪个部分失败了。如果您需要有关样板文件的更多信息，请查看gitHub repo。

Answer 1

发现问题,，

我只是在生产环境中加载javascript，而不是在任何地方。将loadJavascript移动到common修复了我的问题：

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