有一个prod构建问题与Webpack，React，postCSS，以及可能正确注入的其他JS代码

我的webpack.prod.config正确地构建我的资产或者可能是我的JS Babel配置问题 .

我可以让它与开发构建一起工作，它正在内联我的CSS，但当我尝试将它们组合成一个CSS文件进行 生产环境 时，它无法正常工作 . 无论发生什么，它都可以在Dev中使用，每个相应的组件中的导入'./filename.css'直接注入CSS . 它也可能是JS，但无论哪种方式，当我构建prod时，CSS无法正常工作，JS也是如此 . 所有React JS组件和其他JS都没有显示，只是来自CDN导入的静态HTML和CSS样式 . 当我点击Webpack注入的脚本标签中的URL时，他们只是引导我到同一页面，而不是我发现奇怪的JS或CSS源 . JS和CSS在Build> Static> JS CSS输出中看起来是正确的 . 有时我收到一个text / html MIME，当它应该是控制台中的其他消息时 .

或者我的JS被破坏而没有正确构建页面 . 不在我的 生产环境 版本中（与部署到Heroku时相同的版本） . 我开始使用create-react-app（弹出），添加Express，preCSS（用于SASS，如预处理），react-bootstrap和其他一些东西 .

这个项目有点乱，因为它是我用作新Web开发的学习工具，从使用静态HTML CSS转换为使用React，JS和Bootstrap（jQuery暂时存在，因为我们将事物转换为纯粹的反应） . 它之前没有问题，但是因为我开始使用postCSS preCSS，但它已经不再有效了 .

以下是我正在使用的一些主要软件包/库 . - jQuery（CDN Script Tag） - BS3（CDN Script Tag，.js，.css） - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin

预先感谢您的帮助 .

HTML + Error I'm getting in the console

[！[HTML生成] [1]] [1] [！[控制台错误] [2]] [2]

Webpack.config.prod.js

var path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var url = require('url');
var paths = require('./paths');

var homepagePath = require(paths.appPackageJson).homepage;
var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
if (!publicPath.endsWith('/')) {
  // Prevents incorrect paths in file-loader
  publicPath += '/';
}

module.exports = {
  bail: true,
  devtool: 'source-map',
  entry: [
    require.resolve('./polyfills'),
    path.join(paths.appSrc, 'index')
  ],
  output: {
    path: paths.appBuild,
    filename: 'static/js/[name].[chunkhash:8].js',
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
    publicPath: publicPath
  },
  resolve: {
    extensions: ['', '.js', '.json']
  },
  resolveLoader: {
    root: paths.ownNodeModules,
    moduleTemplates: ['*-loader']
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'eslint',
        include: paths.appSrc
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.prod')
      },
      {
        test: /\.css$/,
        include: [paths.appSrc, paths.appNodeModules],
        // Disable autoprefixer in css-loader itself:
        // https://github.com/webpack/css-loader/issues/281
        // We already have it thanks to postcss.
        loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss!sass')
      },
      {
        test: /\.json$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'json'
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'file',
        query: {
            // name: 'static/media/[name].[hash:8].[ext]'
            name: 'static/media/[name].[ext]'
        }
      },
      {
        test: /\.(mp4|webm)(\?.*)?$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      }
    ]
  },
  eslint: {
    // TODO: consider separate config for production,
    // e.g. to enable no-console and no-debugger only in prod.
    configFile: path.join(__dirname, 'eslint.js'),
    useEslintrc: false
  },
  postcss: function() {
    return [precss, autoprefixer];
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      favicon: paths.appFavicon,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    }),
    new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
  ]
};

Build.js

process.env.NODE_ENV = 'production';
var chalk = require('chalk');
var fs = require('fs');
var path = require('path');
var filesize = require('filesize');
var gzipSize = require('gzip-size').sync;
var rimrafSync = require('rimraf').sync;
var webpack = require('webpack');
var config = require('../config/webpack.config.prod');
var paths = require('../config/paths');
var express = require('express');

var app = express();

// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
rimrafSync(paths.appBuild + '/*');

console.log('Creating an optimized production build...');
webpack(config).run(function(err, stats) {
  if (err) {
    console.error('Failed to create a production build. Reason:');
    console.error(err.message || err);
    process.exit(1);
  }

  console.log(chalk.green('Compiled successfully.'));
  console.log();

  console.log('File sizes after gzip:');
  console.log();
  var assets = stats.toJson().assets
    .filter(asset => /\.(js|css)$/.test(asset.name))
    .map(asset => {
      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
      var size = gzipSize(fileContents);
      return {
        folder: path.join('build', path.dirname(asset.name)),
        name: path.basename(asset.name),
        size: size,
        sizeLabel: filesize(size)
      };
    });
  assets.sort((a, b) => b.size - a.size);

  var longestSizeLabelLength = Math.max.apply(null,
    assets.map(a => a.sizeLabel.length)
  );
  assets.forEach(asset => {
    var sizeLabel = asset.sizeLabel;
    if (sizeLabel.length < longestSizeLabelLength) {
      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length);
      sizeLabel += rightPadding;
    }
    console.log(
      '  ' + chalk.green(sizeLabel) +
      '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
    );
  });
  console.log();

  if (process.env.NODE_ENV === 'production') {
        // Serve the static HTML file from paths.appBuild directory
        app.use(express.static(paths.appBuild));
        console.log('Static build directory now being served, paths.appBuild: ', paths.appBuild);

        // Serve the static HTML file from express
        console.log('Adding static path to Express routing...');
        app.get('*', function(req, res) {
            res.sendFile(paths.appHtml);
            console.log('Path serving HTML at paths.appHTML: ', paths.appHtml);
        });
        // List out which port is being used and listen for changes on the server
        app.listen(process.env.PORT || 9004, function(){
            console.log('Express server listening on port %d in %s mode', (process.env.PORT || 9004), app.settings.env);
        });
    }
  console.log();
});