4.0.1移行ログ2018-03-02目次webpackインストールJavaScript関連するものインストールコンパイルSCSS関連するものinstallコンパイルextract-text-webpack-plugin再インストール再コンパイルimg関連するものinstallコンパイルEJS関連するものインストールコンパイルbrowsersync関連するものインストールコンパイルソースマップコンパイルの速さ2018年2月25日にwebpack4がリリースされたので、普段使っている3.7.1版のテンプレートを4.0.1に移行してみた時のログです。現状だといくつかwarningはでますが、以前のまま移行出来ました。サンプルリポジトリです。https://github.com/nao5151/webpack-samplehttps://github.com/nao5151/webpack-sample/tree/master/v3.7.1https://github.com/nao5151/webpack-sample/tree/master/v4.0.1jsからejsまでwebpackにのっかっています。前に移行を試してみたのですが、その時はエラーがでてすぐに諦めました。今回は一個ずつ進めていきたいと思います。webpackインストール肝心のversion4をインストールします。webpack-cliが必要になりました。"^2.0.9"スクリプトはこんな感じに設定しておきました。production"}webpack.config.jsは長いので、リポジトリの最終形態を参照してみてください🙇JavaScriptflowで型をつけてbabelでトランスパイルします。"^6.23.0",コンパイル無事ファイルが出力されました。最初から型つけるならtypescriptにしてもいいかなと思いはじめてます。SCSSpostcssも気になってますが、以前試してみた時にvscodeと上手く連携できなかったためscssを使っています。前回エラーが出た部分がExtractTextWebpackPluginなので、今回は乗り越えたいと思います。ExtractTextWebpackPlugin)そのうち必要なくなるのかもしれませんが、調べてもよく分からなかったためインストールします。"^3.0.2"コンパイル実行してみるとやはり、ここでエラーがでました。extract-text-webpack-pluginがversion4に対応してないみたいですね。extract-text-webpack-plugin再インストールこちらのissueコメントを参考に@nextでインストールしなおしてみます。"^4.0.0-beta.0"再コンパイル無事cssが出力されました!切り抜けました!imgcopy-webpack-pluginでcopyするだけです。必要ないときは使ってません。issuesを見てましたが、そのうち対応してくれるのでしょうかEJS最近は必要ない案件が多いですが、ejsのコンパイルもできるようにしておきます。HtmlWebpackPluginに記載があったので、長ったらしいやつをinstallしました。ejsのloaderは自作です。でましたが、出力されます。browsersyncマークアップ時に欲しいため準備しました。installed.があり、もしやと思いましたがwatchの時に起動してくれました!issueコメントにもあるようにこれもそのうち対応していただけそうですね。trueに設定しました。ソースマップがなかったです。どっかでmodeがdevelopmentの時はソースマップが出力されると見た気がしたのですが...よくわからなかったので、ひとまず自分で指定することにしました。process.env.DEV_TOOLダサいので、分かったら直そうとおもいます。コンパイルの速さちゃんと計測はしていませんが、よくわからなかったです...モリモリすぎてうまく扱えてないのかもしれません。同じ環境のリポジトリを作ってあるので、そのうちちゃんと比較して記事が書けたらなーと思います。byHugo,Netlify.googletagmanager。