Edited at

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

More than 1 year has passed since last update.


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系への移行を考えている方の参考になれば幸いです。