使い方
参考:
webpack4 で SCSS + Autoprefixer + CSScomb + Babel + ESLint 環境構築 | iwb.jp
Webpack4 と Babel7 と node-sass による Web ページ作成環境を構築する | 測度ゼロの抹茶チョコ
Webpack4 + TypeScript + Sass + EJS の開発環境を構築する | あるいてっく
最新版 TypeScript 3.0 + Webpack 4 の環境構築まとめ (React, Vue.js, Three.js のサンプル付き) | ICS MEDIA
導入
参考:
npm と webpack4 でビルド – jQuery からの次のステップ – Qiita
Webpack 4 Tutorial やってみた | albatrosary’s blog
最新版で学ぶ webpack 4 入門 – JavaScript のモジュールバンドラ | ICS MEDIA
webpack を使って javascript ファイルをバンドルさせる | デザインサプライ DesignSupply.
webpack 3.7.1 => 4.0.1 移行ログ | Miobiki
Webpack 4 in production: How to make your life easier | David Qorashi
A tale of Webpack 4 and how to finally configure it in the right way | Hacker Noon
Working with Webpack 4, ES6, PostCSS with preset-env (and more!) | Jon Torrado
Webpack 4 Tutorial: from 0 Conf to Production Mode | Valentino Gagliardi
概要
参考:
webpack4 への簡単なマイグレーションガイド | 技術探し
次のリリースである webpack 4 の主な変更点まとめ | 技術探し
--mode オプション
参考:
webpack4 には “--mode” オプションが必須らしい | ウェブエンジニア珍道中
Webpack 4 を使ってみたらビルド時に WARNING が出たので – Qiita
webpack4 mode オプションを予習する | seihmd tech blog
webpack の mode は重要!難読化から Minify までする優れモノ | このすみエンジニアブログ
webpack 4: access the mode flag from webpack.config.js file · Issue #6460 · webpack/webpack – GitHub
babel-loader
参考:
babel-loader のアップデートで起きたエラーを解決 – Qiita
Babel 7
参考:
とりあえず webpack 4 で Babel 6 か 7 を導入する – Qiita
TypeScript
参考:
設定ファイル不要の webpack 4 で、Babel や TypeScript のゼロコンフィグのビルド環境を作ってみる – Qiita
React
参考:
webpack4 で React 環境開発 + SASS もやる – Qiita
Webpack4 で React 環境を整える (sass も) | Beautiful Ajax
Webpack 4 + Babel + React 入門 2018 | the2g
React + Webpack 4 + Babel 7 Setup Tutorial | RWieruch
How to set up React, Webpack 4, and Babel 7 (2018) | Valentino Gagliardi
Deprecation ワーニング
コマンドラインで --trace-deprecation
オプションを指定して、deprecation ワーニングが発生している箇所のスタックトレースを表示する。
$ node --trace-deprecation node_modules/.bin/webpack arguments ...
Ruby on Rails で Webpacker を利用している場合は NODE_OPTIONS
環境変数に指定する。
$ NODE_OPTIONS="--trace-deprecation" bin/webpack
参考: