LoginSignup
31

More than 5 years have passed since last update.

Webpackを1系から2系に移行する

Last updated at Posted at 2017-03-13

webpack2系の正式版がリリース

2017年1月にwebpack 2.xの正式版としてwebpack v2.2がリリースされた。

webpack1系から2系に移行する際の手順を示す。
development環境はHMRで、production環境はExtractTextPluginでcssファイルを書き出す設定をしている人向け。
postcss-importを使っている人は注意。

yarn upgrade webpack

まずは、webpackのバージョンのupgradeを行う。
同時に1系に依存しているパッケージもupgradeを行う。

console
$ yarn upgrade webpack webpack-dev-server extract-text-webpack-plugin
package.json
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
-    "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.2",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",

webpack.configの書き換え

下記に従って、webpack.configを書き換えていく。
rulesuseを使うようにapiが修正された。

Migrating from v1 to v2

webpack.config.js
resolve: {
- extensions: ['', '.js', '.jsx'],
+ extensions: ['.js', '.jsx'],
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom'),
  },
},
module: {
- loaders: [
+ rules: [
    {
      test: /\.jsx?$/,
-     loader: 'babel-loader',
+     use: 'babel-loader',
      exclude: /node_modules/,
    },
    {
      test: /\.css$/,
-     loaders: [
+     use: [
        'css-loader/locals?modules&localIdentName=[name]--[local]--[hash:base64:5]',
        'postcss-loader',
      ],
    },
  ],
},

また、production向けにExtractTextPluginを使っている箇所は

webpack.config.js
- loader: ExtractTextPlugin.extract(
-   'style-loader',
-   ['css-loader?modules&localIdentName=[name]--[local]--[hash:base64:5]', 'postcss-loader']
- ),
+ use: ExtractTextPlugin.extract({
+   fallback: 'style-loader',
+   use: ['css-loader?modules&localIdentName=[name]--[local]--[hash:base64:5]', 'postcss-loader']
+ }),

このように書き換える

PostCSS周り

postcss.config.jsを作成する

webpack.config.js
-const postcssImport = require('postcss-import')
-const postcssCssnext = require('postcss-cssnext')
-const cssnano = require('cssnano')

...

-  postcss() {
-    return [postcssImport, postcssCssnext, cssnano]
-  },
postcss.config.js
+const postcssImport = require('postcss-smart-import')
+const postcssCssnext = require('postcss-cssnext')
+const cssnano = require('cssnano')
+
+module.exports = {
+  plugins: [
+    postcssImport, postcssCssnext, cssnano
+  ]
+}

postcss-importがwebpack2系でのHMRに対応していないようで、webpack-dev-server --hotしている最中にcssを書き換えると、下記エラーが出る

console
ERROR in ./~/css-loader?modules&localIdentName=[name]--[local]--[hash:base64:5]!./~/postcss-loader!./app/assets/styles/test.css
Module build failed: (SystemJS) ENOENT: no such file or directory, open '/Users/kikunantoka/repository/application/client/node_modules/css-loader/lib/loader'

Doesn't compiles css · Issue #106 · postcss/postcss-loader

{ addDependencyTo: webpack }を加える方法で対応していたようだが、postcss-loaderのexampleをみると、postcss-smart-importが推奨されているので、postcss-importからpostcss-smart-importに乗り換えた

console
$ yarn remove postcss-import
$ yarn add postcss-smart-import
package.json
-    "postcss-import": "^9.1.0",
     "postcss-loader": "^1.3.3",
+    "postcss-smart-import": "^0.6.9",

動作確認

development環境でのHMRもproduction環境向けのExtractTextPluginによるcssの吐き出しも成功しました🎉
webpack2系への移行を考えている方の参考になれば幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31