Вопрос:

Возникла проблема со сборкой prod при правильном внедрении Webpack, React, postCSS и, возможно, другого кода JS

javascript jquery reactjs webpack postcss

1531 просмотра

1 ответ

96 Репутация автора

У меня проблема с моим 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. Когда-нибудь я

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

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

Вот некоторые из основных пакетов / библиотек, которые я использую. - jQuery (тег сценария CDN) - BS3 (тег сценария CDN, .js, .css) - React-Bootstrap - React-оверлеи - 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();
});
Автор: retrospct Источник Размещён: 22.08.2016 09:09

Ответы (1)


2 плюса

96 Репутация автора

В файле webpack.config.prod.js значение output: publicPath: было установлено равным переменной, publicPathкоторая была частью кода, извлеченного из приложения create-реагировать. Я использовал его повторно, не понимая, к чему приведет переменная 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
  },
Автор: retrospct Размещён: 23.08.2016 12:56
Вопросы из категории :
32x32