Как понять, какой нужен загрузчик webpack`у для компиляции пакета?

Question

[d-virt]

Добрый день!

webpack.js

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

const path = require('path');
const webpack = require('webpack');
const extend = require('extend');

const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];
const GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  __DEV__: DEBUG,
};

module.exports = {
  entry: './src/client.js',
  output: {
    path: path.resolve(__dirname, './build/public/assets'),
    filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
    chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
    sourcePrefix: '  ',
    publicPath: '/assets/'
  },
  target: 'web',
  plugins: [
    new webpack.DefinePlugin(extend({}, GLOBALS, {'process.env.BROWSER': true })),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    ...DEBUG ? [] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
          warnings: VERBOSE,
        },
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
    ],
  ],
  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, './src'),
        ],
        query: {
          cacheDirectory: DEBUG,
          babelrc: false,
          presets: [
            'es2015',
            'stage-0',
            'react',
          ],
          plugins: [
            'transform-runtime',
            ...DEBUG ? [] : [
              'transform-react-remove-prop-types',
              'transform-react-constant-elements',
              'transform-react-inline-elements',
            ],
          ],
        },
      },
      {
        test: /\.css/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({
            sourceMap: DEBUG,
            modules: true,
            localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
            minimize: !DEBUG,
          })}`,
          'postcss-loader?pack=default',
        ],
      },
      {
        test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
          'postcss-loader?pack=sass',
          'sass-loader',
        ],
      },
      {
        test: /\.less/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
          'postcss-loader?pack=less',
          'less-loader',
        ],
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.txt$/,
        loader: 'raw-loader',
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
          limit: 10000,
        },
      },
      {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: 'file-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
        },
      },
    ],
  },

  resolve: {
    root: path.resolve(__dirname, './src'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
  },

  cache: DEBUG,
  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG,
    hash: VERBOSE,
    version: VERBOSE,
    timings: true,
    chunks: VERBOSE,
    chunkModules: VERBOSE,
    cached: VERBOSE,
    cachedAssets: VERBOSE,
  },

  postcss(bundler) {
    return {
      default: [
        require('postcss-import')({ addDependencyTo: 
        require('postcss-custom-properties')(),
        require('postcss-custom-media')(),
        require('postcss-media-minmax')(),
        require('postcss-custom-selectors')(),
        require('postcss-calc')(),
        require('postcss-nesting')(),
        require('postcss-color-function')(),
        require('pleeease-filters')(),
        require('pixrem')(),
        require('postcss-selector-matches')(),
        require('postcss-selector-not')(),
        require('postcss-flexbugs-fixes')(),
        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
      ],
      sass: [
        require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
      ],
    };
  },
};

Подключил пакет react-input-colorpicker и импортировал его в компоненте.
При компиляции выдает ошибку:

ERROR in ./~/react-input-colorpicker/ColorPickr.js
Module parse failed: front\node_modules\react-input-colorpicker\ColorPickr.js Unexpected token (87:20)
You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (87:20)
at Parser.pp$4.raise (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseIdent (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2189:12)
at Parser.pp$3.parsePropertyName (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2052:101)
at Parser.pp$3.parseObj (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1988:14)
at Parser.pp$3.parseExprAtom (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$1.parseVar (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1034:28)
at Parser.pp$1.parseVarStatement (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:917:10)
at Parser.pp$1.parseStatement (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:706:19)
at Parser.pp$1.parseBlock (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$1.parseStatement (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:709:33)
at Parser.pp$1.parseIfStatement (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:824:28)
at Parser.pp$1.parseStatement (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:698:30)
at Parser.pp$1.parseBlock (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2105:24)
at Parser.pp$3.parseArrowExpression (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2087:10)
at Parser.pp$3.parseParenArrowList (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1902:17)
at Parser.pp$3.parseParenAndDistinguishExpression (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1870:21)
at Parser.pp$3.parseExprAtom (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1796:19)
at Parser.pp$3.parseExprSubscripts (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (front\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
@ ./src/components/InputColor/index.js 31:29-63

Мол, требуется соответствующий загрузчик, хм - подскажите, пожалуйста, это какой?

Спасибо!

Answer 1

[Aves]

По идее, в https://github.com/homfen/react-colorpicker/blob/m... оператор spread object
а из-за

loader: 'babel-loader',
include: [
  path.resolve(__dirname, './src'),
]

к файлам в node_modules babel не применяется.

Comments

[d-virt]

Хех, спасибо! А может еще подскажите, как бороться, что бы бабел применялся к пакетам из node_modules ?

[Aves]

d-virt: webpack.github.io/docs/configuration.html#module-l...
можно просто удалить include, тогда ко всем файлам js будет применяться
лучше добавить в includes

path.resolve(__dirname, <путь до react-input-colorpicker>)

[d-virt]

Aves: Большое спасибо! Помогло!