webpack3.7.1 => 4.0.1移行ログ
目次
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
ダサいので、分かったら直そうとおもいます。
コンパイルの速さ
ちゃんと計測はしていませんが、よくわからなかったです…
モリモリすぎてうまく扱えてないのかもしれません。
ほぼ同じ環境のリポジトリを作ってあるので、そのうちちゃんと比較して記事が書けたらなーと思います。
まだまだ対応が間に合ってないプラグインもありますが、ひとまず移行できました!