Blog の
実施した
前提
実行環境、
OS
% sw_vers ProductName: Mac OS X ProductVersion: 10.13.6 BuildVersion: 17G65
webpack の
version % npm list --depth 0 clean_blog_frontend@0.0.1 ├── babel-core@6.26.0 ├── babel-loader@7.1.2 ├── babel-preset-es2015@6.24.1 ├── babel-root-import@4.1.8 ├── clean-webpack-plugin@0.1.18 ├── css-loader@0.28.9 ├── eslint@4.18.2 ├── eslint-config-google@0.9.1 ├── extract-text-webpack-plugin@3.0.2 ├── file-loader@1.1.6 ├── font-awesome@4.7.0 ├── idb@2.0.4 ├── jquery@2.1.1 ├── npm@5.10.0 ├── uglify-loader@2.0.0 ├── url-loader@0.6.2 ├── webpack@3.12.0 ├── webpack-bundle-tracker@0.2.1 ├── webpack-pwa-manifest@3.5.0 ├── webpack-stats-plugin@0.2.1 ├── webpack-subresource-integrity@1.1.0-rc.4 ├── workbox-broadcast-cache-update@2.0.3 ├── workbox-webpack-plugin@2.1.2 └── zopfli-webpack-plugin@0.1.0
マイグレーションガイド
webpack 公式の
マイグレーションガイド
To v4 from v3タスク
マイグレーションガイドを 読んだ 結果、 以下のような 手順で 進めようかと 考えました。
4. とりあえず、<wbr>build して<wbr>エラーに<wbr>対処していく。<wbr>
はplugin エラー等は ドキュメント読むよりも 場当たり 的な 対処していった ほうが 個人的に 早そうに 思った ためです。
ガイドには、削除される plugin の 記述も あるので、 ドキュメントに 従って 削除してから 作業してもよいかと 思います。 - CLI の
インストール - package.json を
webpack の verison を 書き換える。 - npm update を
実行。 - mode オプションの
追加。 - とりあえず、
build して エラーに 対処していく。
- CLI の
マイグレーション作業
タスクに
1. CLI の インストール
v4 から、
% npm install webpack-cli --save-dev npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself. + webpack-cli@3.1.2 added 39 packages from 8 contributors in 17.649s
webpack@^4.x.x
が2. package.json を webpack の verison を 書き換える。
package.json の
修正前
"devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-root-import": "^4.1.8", "css-loader": "^0.28.9", "eslint": "^4.18.2", "eslint-config-google": "^0.9.1", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.6", "font-awesome": "^4.7.0", "uglify-loader": "^2.0.0", "url-loader": "^0.6.2", "webpack": "^3.12.0", "webpack-bundle-tracker": "^0.2.1", "webpack-cli": "^3.1.2", "webpack-pwa-manifest": "^3.5.0", "webpack-stats-plugin": "^0.2.1", "webpack-subresource-integrity": "^1.1.0-rc.4", "workbox-broadcast-cache-update": "^2.0.3", "workbox-webpack-plugin": "^2.1.2", "zopfli-webpack-plugin": "^0.1.0" },
修正後
"webpack": "^4.26.0",
に変更しました。 "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-root-import": "^4.1.8", "css-loader": "^0.28.9", "eslint": "^4.18.2", "eslint-config-google": "^0.9.1", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.6", "font-awesome": "^4.7.0", "uglify-loader": "^2.0.0", "url-loader": "^0.6.2", "webpack": "^4.26.0", "webpack-bundle-tracker": "^0.2.1", "webpack-cli": "^3.1.2", "webpack-pwa-manifest": "^3.5.0", "webpack-stats-plugin": "^0.2.1", "webpack-subresource-integrity": "^1.1.0-rc.4", "workbox-broadcast-cache-update": "^2.0.3", "workbox-webpack-plugin": "^2.1.2", "zopfli-webpack-plugin": "^0.1.0" },
3. npm update を 実行。
npm update
を
plugin の
WARN notice [SECURITY] jquery has the following vulnerability: 1 high. Go here for more details: https://nodesecurity.io/advisories?search=jquery&version=2.2.4 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info. npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself. npm WARN uglify-loader@2.0.0 requires a peer of uglify-js@^2.4.16 but none is installed. You must install peer dependencies yourself. npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself. npm WARN zopfli-webpack-plugin@0.1.0 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself. npm WARN file-loader@1.1.11 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN webpack-subresource-integrity@1.3.0 requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself. npm WARN webpack-subresource-integrity@1.3.0 requires a peer of webpack@^1.12.11 || ~2 || ~3 || ~4 but none is installed. You must install peer dependencies yourself. npm WARN babel-loader@7.1.5 requires a peer of webpack@2 || 3 || 4 but none is installed. You must install peer dependencies yourself. npm WARN clean_blog_frontend@0.0.1 No repository field.
4. mode オプションの 追加。
webpack.config.js に、
これは、
module.exports = { mode: 'development',
5. とりあえず、 build して エラーに 対処していく。
npm run-script build
を
sh: webpack: command not found
webpack の
package.json の
修正前
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "./node_modules/.bin/webpack --watch --progress --config webpack.config.js", "build": "./node_modules/.bin/webpack --config webpack.config.js", "eslint": "./node_modules/.bin/eslint" },
修正後
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "./node_modules/.bin/webpack-cli --watch --progress --config webpack.config.js", "build": "./node_modules/.bin/webpack-cli --config webpack.config.js", "eslint": "./node_modules/.bin/eslint" },
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
production モードだとUglifyJsPlugin
がUglifyJsPlugin
の
configuration.module has an unknown property ‘loaders’. These properties are valid:
v3 でloaders
とrules
に
module: { rules: [ {
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
extract-text-webpack-plugin
を
webpack-contrib/extract-text-webpack-plugin: Extracts text from a bundle into a separate file に、
mini-css-extract-plugin の インストール
extract-text-webpack-plugin
をmini-css-extract-plugin
を
アンインストール、
インストール npm install -D extract-text-webpack-plugin npm install --save-dev mini-css-extract-plugin
webpack.config.js の
修正
plugin の変更に あわせて、 webpack.config.js の 修正を 行います。
optimize-css-assets-webpack-plugin の インストール
mini-css-extract-plugin
は
出力された css が
npm install --save-dev optimize-css-assets-webpack-plugin
修正前と、 修正後の package.json 、 webpack.config.js の 比較
以下、
追記.別アプリで 実施した 際の エラーの 記録
後日、
同一の
Module build failed (from ./node_modules/eslint-loader/index.js): TypeError: Cannot read property ‘eslint’ of undefined
以下に
eslint-loader が
plugin に
package.json に
"eslint-loader": "^2.0.0",
参考
アップデート時に
- webpack4に
更新した 時に こけた 所まとめ - Qiita - webpack v3から
v4へ アップデートした 時に 発生した エラーと 対応 - 文系プログラマに よる TIPSブログ - To v4 from v3
- webpack 3 から
webpack 4 へ アップデートする 際に ハマりそうなこと – rilakkuma3xjapan’s blog - Webpack v3 → v4移行パッケージ対照表 - Qiita
- NMFR/optimize-css-assets-webpack-plugin: A Webpack plugin to optimize minimize CSS assets.
extract-text-webpack-plugin の
以上です。
コメント