javascript - webpack babel css @非法token

Question

我已经将我的 ReactJS 项目从 creact-react-app 转换为 webpack node SSR（服务器端渲染），我已经解决了几十个错误和依赖关系以及其他问题。但是在启动 nodejs 服务器后，我无法解决和搜索一个问题：

node_modules/react-image-gallery/styles/css/image-gallery.css:1
(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";
                                                              ^

SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)

我唯一能做的就是评论风格而不是使用它，这是不好的。已经尝试过不同的加载器、webpack 配置……但没有一个能奏效。

这是我没有 css 加载器的 webpack 配置，所以我希望有人能帮助填补和解释这个空白。我想实现：

• 忽略服务器的 css 文件

• 收集所有css文件，合并它们，缩小合并，移动到./build/assets/css/app.css

  var webpack = require('webpack');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var nodeExternals = require('webpack-node-externals');
  
  var serverPlugins = [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }),
    //new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
  ];
  
  var clientPlugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: false }),
    new ExtractTextPlugin('css/index.css', { allChunks: true })
  ];
  
  var commonLoaders = [
    {
      test: /\.json$/,
      loader: 'json-loader'
    },
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel',
    }
  ];
  
  var server = {
    entry: './src/server.js',
    output: {
      path: './build',
      filename: 'server.js',
      libraryTarget: 'commonjs2',
      publicPath: '/'
    },
    target: 'node',
    externals: nodeExternals(),
    plugins: serverPlugins,
    module: {
      loaders: [].concat(commonLoaders)
    }
  };
  
  var client = {
    mode: 'development',
    entry: './src/index.js',
    output: {
      path: './build/assets/js',
      filename: 'bundle.js',
      publicPath: '/'
    },
    plugins: clientPlugins,
    module: {
      loaders: [].concat(commonLoaders)
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  };
  
  module.exports = [server, client];
  

谢谢

标签： javascriptcssnode.jsreactjswebpack