Наличие проблемы с сборкой prod с помощью Webpack, React, postCSS и, возможно, другого JS-кода, который правильно вводится

Question

У меня возникла проблема с моим файлом webpack.prod.config, который правильно или, возможно, проблема с моей конфигурацией JS Babel.

Я могу заставить его работать с конструкцией разработки, где он вставляет мой CSS, но он не работает, когда я пытаюсь объединить его в один файл CSS для производства. Что бы ни происходило, он работает в Dev с CSS, который вводится непосредственно путем импорта './filename.css' в каждом из соответствующих компонентов. Это также может быть JS, но в любом случае, когда я строю для prod, CSS не работает правильно, и JS не является. Все компоненты React JS и другие JS не отображаются, только статический стиль HTML и CSS из импорта CDN. Когда я нажимаю на URL-адреса в тегах сценария, введенных в Webpack, они просто приводят меня к той же странице вместо источника JS или CSS, который я нашел нечетным. JS и CSS выглядят корректно в выводах Build> Static> JS + CSS. Когда-то я получаю полученный текст/html MIME, когда он должен был быть чем-то другим сообщением в консоли.

Либо это, либо мой JS сломан, а не строит страницу правильно. Не в моей сборке (такая же конструкция, когда она развернута в Heroku). Я начал с приложения для создания-реакции (изгнал), добавил Express, preCSS (для SASS, как препроцессинг), реакция-бутстрап и несколько других вещей.

Этот проект является своего рода беспорядком, поскольку это то, что я использую в качестве инструмента обучения для нового веб-разработчика для перехода от использования статического HTML + CSS к использованию React, JS и Bootstrap (jQuery временно существует, поскольку мы конвертировать вещи в чистый Реакт). Он строился ранее без проблем, но так как я начал общаться с использованием postCSS + preCSS, но он больше не работает.

Вот некоторые из основных пакетов/библиотек, которые я использую. - JQuery (CDN Tag Script) - BS3 (CDN Script Tag, .js, .css) - React-Bootstrap - React-наложений - Бабель - postCSS - preCSS - ExtractTextPlugin

Спасибо заранее за вашу помощь.

HTML + Ошибка я получаю в консоли

[! [HTML генерируется] [1]] [1] [! [Console Error] [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(); 
}); 

Answer 1

В файле webpack.config.prod.js вывод: publicPath: значение было установлено переменной publicPath, которая была частью кода, выброшенного из приложения create-react-app. Я повторно использовал его без полного понимания того, что будет решать переменная publicPath. Он выплевывал путь github-username/repo-name, когда мне было нужно относительный путь '/' для моих целей.

Я не заметил, что введенные теги css + js в index.html были неправильными путями, поскольку ошибки, сообщаемые в консоли, указывали только на ошибку синтаксиса, поэтому должно было быть, что CSS и JS не загружались в страница. Я исправил путь к использованию '/' как относительный путь к папке paths.appBuild, где все статические активы жили и обслуживались.

Этот стек пост помог, а также: Webpack publicPath

// variables from the create-react-app eject, will be removing these from my webpack.config.prod.js file 
var homepagePath = require(paths.appPackageJson).homepage; 
var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/'; 
if (!publicPath.endsWith('/')) { 
    // Prevents incorrect paths in file-loader 
    publicPath += '/'; 
} 

console.log('homepagePath: ', homepagePath); // Resolves to git repo url 
console.log('publicPath: ', publicPath); // Resolves to /retrospct/tellus-aerospace/ 

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: '/' // Previously this was the variable publicPath set above 
    },