Question

我已经从Rubix template开发了React应用程序。我安装了React Rangeslider，将其.css文件转换为.scss并修改了.js文件以导入.scss而不是.css。

运行React dev服务器（npm run dev -s）时，一切都运行良好。但是，在构建生产资产和运行生产服务器（npm run prod -s）时，我遇到了一个问题：没有滑块。

开发服务器：

prod服务器（90是滑块的默认值）：

我有三个webpack文件：webpack.common.js，webpack.client.js。

webpack.common.js（根本没有css / scss加载器！）：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules|bower_components/,
        loader: 'babel'
      },
      {
        test: /\.txt$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'raw'
      },
      {
        test: /\.json$/, loader: 'json'
      },
      {
        test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
        loaders: ["file?context=public&name=/[path][name].[ext]"],
        exclude: /node_modules/
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[hash].[ext]"
      },
    ]
  },
  progress: true,
  resolve: {
    modulesDirectories: [
      "src",
      "sass",
      "public",
      "node_modules"
    ],
    extensions: ["", ".json", ".js"]
  }
};

webpack.client.js：

var path = require('path');
var rtlcss = require('rtlcss');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var autoprefixer = require('autoprefixer');
var blessPlugin = require('bless-webpack-plugin');
var webpackCommonConfig = require('./webpack.common');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var isProduction = process.env.NODE_ENV === 'production';

var sourceMap = false;

if (process.env.SOURCEMAP === 'true') {
  sourceMap = true;
}

var wds = {
  hostname: process.env.WP_HOST || "localhost",
  port: process.env.WP_PORT || 8079
};

var wdsPath = "http://" + wds.hostname + ":" + wds.port;
var publicPath = wdsPath + "/assets/";

var devtool = '';
var entry = {
  'app': ['./src/main.js'],
  'main': ['./sass/main.scss'],
  'main-rtl': ['./sass/main.rtl.scss'],
  'plugins': ['./src/plugins.js']
};

var plugins = [
  new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: isProduction, __DEV__: !isProduction, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"', __DEVTOOLS__: true}),
  new webpack.IgnorePlugin(/vertx/)
];

if (process.env.EXTRACT_TEXT_PLUGIN === 'true') {
  plugins.unshift(new ExtractTextPlugin('css/[name].css'));
  plugins.unshift(blessPlugin({ imports: true, compress: true }));
}

if (isProduction) {
  plugins.unshift(new webpack.optimize.OccurrenceOrderPlugin());
  plugins.unshift(new webpack.optimize.DedupePlugin());
  plugins.unshift(new webpack.optimize.UglifyJsPlugin({
    mangle: false,
    compress: {
      unused: false,
      warnings: false
    },
    sourceMap: sourceMap
  }));
} else {
  plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

function getStyleLoader(prefixer) {
  var s = '';

  if (sourceMap) s = 'sourceMap';

  if (process.env.EXTRACT_TEXT_PLUGIN === 'false') {
    return [
      'style',
      'css?-minimize&importLoaders=1&root=../public&' + s,
      'postcss-loader?pack='+prefixer+'!sass?' + s
    ];
  }

  return [
    ExtractTextPlugin.loader({
      extract: true,
      omit: 1
    }),
    'style',
    'css?-minimize&importLoaders=1&' + s,
    'postcss-loader?pack='+prefixer+'&' + s,
    'sass?' + s
  ];
}

devtool = sourceMap ? 'source-map' : '';

if (!isProduction) {
  for (var key in entry) {
    if (entry.hasOwnProperty(key)) {
      entry[key].push("webpack/hot/only-dev-server");
    }
  }

  entry.app.unshift("react-hot-loader/patch");

  entry.devServerClient = "webpack-dev-server/client?" + wdsPath;
}

var ltrloaders = getStyleLoader('normalprefixer');
var rtlloaders = getStyleLoader('rtlprefixer');

if (process.env.RTL !== 'true') {
  rtlloaders = ['null-loader'];
}

var loaders = webpackCommonConfig.module.loaders.concat();
// ltr/rtl loaders
loaders.push({ test: function(absPath) {
  if (absPath.search('rtl.scss') !== -1) {
    return true;
  }
  return false;
}, loaders: rtlloaders });
loaders.push({ test: function(absPath) {
  if (absPath.search('rtl.scss') === -1
   && absPath.search('.scss') !== -1) {
    return true;
  }
  return false;
}, loaders: ltrloaders });

// script loader for plugins.js
var pluginLoaders = ['script'];
if (isProduction) {
  pluginLoaders.push('uglify');
}
loaders.push({
  test: /(\/|\\)public(\/|\\)(.*?)\.js$/,
  loaders: pluginLoaders
});

delete webpackCommonConfig.module;

module.exports = deepmerge({
  cache: true,
  debug: true,
  devtool: devtool,
  entry: entry,
  module: {
    loaders: loaders
  },
  postcss: function() {
    return {
      normalprefixer: [ autoprefixer({ browsers: ['last 2 versions', '> 1%', 'ie 9'] }) ],
      rtlprefixer: [ autoprefixer({ browsers: ['last 2 versions', '> 1%', 'ie 9'] }), rtlcss ]
    };
  },
  devServer: {
    contentBase: wdsPath,
    publicPath: publicPath,
    hot:        true,
    inline:     false,
    lazy:       false,
    quiet:      true,
    noInfo:     true,
    headers:    { "Access-Control-Allow-Origin": "*" },
    stats:      { colors: true },
    host:       wds.hostname,
    port:       wds.port
  },
  output: {
    path: path.join(process.cwd(), 'public'),
    publicPath: isProduction ? '/' : publicPath,
    chunkFilename: 'js/[name].js',
    filename: 'js/[name].js',
  },
  plugins: plugins,
}, webpackCommonConfig);

webpack.server.js：

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var webpackCommonConfig = require('./webpack.common');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

var sourceMapSupportModule = "require('source-map-support').install({environment: 'node'});\n\n";

var output = { path: path.join(process.cwd(), 'tmp'), filename: 'bundle.js' };

if (process.env.NO_OUTPUT_PATH) {
  output = { filename: 'server.js' };
}

var loaders = webpackCommonConfig.module.loaders.concat();
loaders.push({ test: /\.scss$/, loader: 'null' });

delete webpackCommonConfig.module;

module.exports = deepmerge({
  devtool: 'source-map',
  entry: [
    './server.babel.js'
  ],
  output: output,
  target: 'node',
  module: {
    loaders: loaders
  },
  plugins: [
    new webpack.BannerPlugin(sourceMapSupportModule, {
      raw: true,
      entryOnly: true
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"'}),
    new webpack.IgnorePlugin(/vertx/)
  ],
  externals: nodeModules
}, webpackCommonConfig);

我刚刚进入React / JS并且无法弄清楚我做错了什么。

谢谢！

React：运行生产服务器

0 个答案: