javascript - Webpack、React、postCSS、および場合によっては他の JS コードが適切に挿入されているため、prod ビルドの問題が発生している

Question

webpack.prod.config でアセットを適切に構築することに問題があるか、JS Babel 構成に問題がある可能性があります。

CSS をインライン化する開発ビルドで動作させることはできますが、本番用に 1 つの CSS ファイルにまとめようとすると動作しません。何が起こっていても、Dev では CSS がそれぞれのコンポーネントの import './filename.css' によって直接挿入されて動作します。JS の可能性もありますが、製品用にビルドすると、CSS が正しく機能せず、JS も機能しません。すべての React JS コンポーネントとその他の JS は表示されず、CDN インポートからの静的な HTML と CSS スタイルだけが表示されます。Webpack によって挿入されたスクリプトタグの URL をクリックすると、奇妙に感じた JS または CSS ソースではなく、同じページに誘導されます。Build > Static > JS + CSS 出力で、JS と CSS は正しいように見えます。いつか私は

それか私のJSが壊れていて、ページを正しく構築していません。私の本番ビルドにはありません（Herokuにデプロイされたときと同じビルドです）。create-react-app (ejected) から始めて、Express、preCSS (前処理のような SASS 用)、react-bootstrap などを追加しました。

このプロジェクトは、新しい Web 開発者が静的 HTML+CSS の使用から React、JS、および Bootstrap の使用に移行するための学習ツールとして使用しているものであるため、混乱のようなものです (jQuery は一時的にそこにあり、物事を一緒に変換して純粋な React)。以前は問題なくビルドできていましたが、postCSS + preCSS を使い始めて以来、機能しなくなりました。

以下は、私が使用している主なパッケージ/ライブラリの一部です。- jQuery (CDN スクリプトタグ) - BS3 (CDN スクリプトタグ、.js、.css) - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin

よろしくお願いいたします。

コンソールに表示される HTML + エラー

[![生成される 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();
});

javascript - Webpack、React、postCSS、および場合によっては他の JS コードが適切に挿入されているため、prod ビルドの問題が発生している

1 に答える 1

Related

Reference