2018年2月25日にwebpack4がリリースされたので、普段使っている3.7.1版のテンプレートを4.0.1に移行してみた時のログです。

現状だといくつかwarningはでますが、以前のまま移行出来ました。
サンプルリポジトリです。
https://github.com/nao5151/webpack-sample
https://github.com/nao5151/webpack-sample/tree/master/v3.7.1
https://github.com/nao5151/webpack-sample/tree/master/v4.0.1

jsからejsまでwebpackにのっかっています。
少し前に移行を試してみたのですが、その時はエラーがでてすぐに諦めました。
今回は一個ずつ進めていきたいと思います。

webpack

インストール

肝心のversion4をインストールします。webpack-cliが必要になりました。

npm i -D webpack webpack-cli

"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"

スクリプトはこんな感じに設定しておきました。

"scripts": {
    "start": "webpack -w --mode development",
    "build": "webpack --mode production"
}

webpack.config.jsは長いので、リポジトリの最終形態を参照してみてください🙇

JavaScript

flowで型をつけてbabelでトランスパイルします。

関連するものインストール

npm i -D babel-core babel-loader babel-preset-env babel-preset-flow

"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",

コンパイル

無事ファイルが出力されました。 最初から型つけるならtypescriptにしてもいいかなと思いはじめてます。

SCSS

postcssも気になってますが、以前試してみた時にvscodeと上手く連携できなかったためscssを使っています。 そして、前回エラーが出た部分がExtractTextWebpackPluginなので、今回は乗り越えたいと思います。

関連するものinstall

npm i -D autoprefixer css-loader node-sass postcss-loader sass-loader style-loader

"autoprefixer": "^8.0.0",
"css-loader": "^0.28.10",
"node-sass": "^4.7.2",
"postcss-loader": "^2.1.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",

CSS Module Type — CSS as Entry (Goodbye ExtractTextWebpackPlugin)

そのうち必要なくなるのかもしれませんが、調べてもよく分からなかったためインストールします。

npm i -D extract-text-webpack-plugin

"extract-text-webpack-plugin": "^3.0.2"

コンパイル

実行してみるとやはり、ここでエラーがでました。
まだextract-text-webpack-pluginがversion4に対応してないみたいですね。

extract-text-webpack-plugin再インストール

こちらのissueコメントを参考に@nextでインストールしなおしてみます。

npm i -D extract-text-webpack-plugin@next

"extract-text-webpack-plugin": "^4.0.0-beta.0"

再コンパイル

無事cssが出力されました！切り抜けました！

img

copy-webpack-pluginでcopyするだけです。
必要ないときは使ってません。

関連するものinstall

npm i -D copy-webpack-plugin

"copy-webpack-plugin": "^4.4.2"

コンパイル

コンパイルすると DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead と出ますが、動きます。
issuesを見てましたが、そのうち対応してくれるのでしょうか

EJS

最近は必要ない案件が多いですが、ejsのコンパイルもできるようにしておきます。

関連するものインストール

html-webpack-pluginを使っていて、If you use HtmlWebpackPluginに記載があったので、長ったらしいやつをinstallしました。
ejsのloaderは自作です。

npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin ejs git+https://github.com/nao5151/ejs-view-loader.git

"ejs": "^2.5.7",
"ejs-view-loader": "git+https://github.com/nao5151/ejs-view-loader.git",
"html-webpack-plugin": "github:webpack-contrib/html-webpack-plugin",

コンパイル

こちらもコンパイルすると DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead とでましたが、出力されます。

browsersync

マークアップ時に欲しいため準備しました。

関連するものインストール

npm i -D browser-sync browser-sync-webpack-plugin

"browser-sync": "^2.23.6",
"browser-sync-webpack-plugin": "^2.0.1",

コンパイル

install時に不穏なnpm WARN browser-sync-webpack-plugin@2.0.1 requires a peer of webpack@^1 || ^2 || ^3 but none was installed.があり、もしやと思いましたがwatchの時に起動してくれました！
issueコメントにもあるようにこれもそのうち対応していただけそうですね。

ここまで以前の動きのまま移行できました！

何度も注意はされたくないので、webpack.config.jsにprocess.noDeprecation = trueに設定しました。

ソースマップ

途中から気がついたのですが--mode development でソースマップがなかったです。
どっかでmodeがdevelopmentの時はソースマップが出力されると見た気がしたのですが…
よくわからなかったので、ひとまず自分で指定することにしました。

"scripts": {
    "start": "DEV_TOOL=inline-source-map webpack -w --mode development",
    "build": "webpack --mode production"
}

devtool: process.env.DEV_TOOL

ダサいので、分かったら直そうとおもいます。

コンパイルの速さ

ちゃんと計測はしていませんが、よくわからなかったです…
モリモリすぎてうまく扱えてないのかもしれません。
ほぼ同じ環境のリポジトリを作ってあるので、そのうちちゃんと比較して記事が書けたらなーと思います。

まだまだ対応が間に合ってないプラグインもありますが、ひとまず移行できました！