webpack2
Pocket

PostCSSが動かなかったときというか、loaderのオプションなどの書き方が変わったみたいで詰まりました。

もともと書いていたwebpackの設定のmodule部分がこう

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel'
        ]
      },
      {
        test: /\.css$/,
        loaders: [
          'react-hot',
          'style',
          'css',
          'postcss'
        ]
      }
    ]
  },
  postcss: [
    require('postcss-custom-properties')(),
    require('postcss-nesting')()
  ]

PostCSSのプラグインの設定をmoduleの外に書いてました。

またloadersの書き方とかも変わったようで以下のように書き直しました。

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'react-hot-loader',
          'babel-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'react-hot-loader',
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('postcss-custom-properties')(),
                require('postcss-nesting')()
              ]
            }
          }
        ]
      }
    ]
  }

module.loadersがmodule.rulesとなり、loadersがuseになりました。またpostcss-loaderのプラグインはoptionsの中に書いています。

参考にしたissue

Doesn’t work with webpack 2 #92

なんかちょこちょこ変わってるみたいで、まだまだ書き直しが出てくるかもです。

公式サイトの移行手順はこちら

Migrating from v1 to v2

移行もろもろで参考にしたブログ

webpack2へ移行する軽いメモ

技術探し
Pocket

カテゴリー: タグ: