2018-03-26-webpack.md

Webpack

Plugins

• extract-text-webpack-plugin
  • bundle から テキストを抽出して別ファイルとして書き出す
    • module.rules で指定した拡張子のファイルのバンドルに対して ExtractTextPlugin.extract() で抽出する
    • 書き出すファイルは plugins で new ExtractTextPlugin('styles.css') のように指定する
• webpack.DllPlugin
  • 開発時のビルド速度を改善するために使う
  • 普段の開発時の incremental build に毎回含める必要がないライブラリ類などを メインの成果物とは別にビルドし、これを参照するための manifest ファイルを作成する
  • 参照するには webpack.DllReferencePlugin を使用する
• HtmlWebpackPlugin
  • jantimon/html-webpack-plugin
  • webpack で bundle したファイルを読み込む html ファイルを生成する
    • bundle したファイル名がビルド毎に変わる hash を持つ場合などに使う

loaders

• style-loader
  • js から css を import したとき js で DOM に style 要素として追加する
• css-loader
  • css の @import と url() から依存解決する
  • CSS Modules の機能もある
    • options で modules: true に
    • js 側から CSS class を読み込む
      • import styles from './app.css'
      • <div className={styles.foo}>hello</div>;
    • CSS Modules について
      • CSS モジュール ― 明るい未来へようこそ | プログラミング | POSTD
      • webpack の css-loader で CSS Modules をやる - Qiita

Webpack 4

• yarn add -DE webpack-cli
• yarn add -DE extract-text-webpack-plugin@next
• config file に mode: ('production'|'development') を適宜追加する
• 🎼webpack 4: released today!!✨ – webpack – Medium
• Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
  • extract-text-webpack-plugin@next を利用する
    • Webpack 4 compatibility · Issue #701 · webpack-contrib/extract-text-webpack-plugin · GitHub

init

• webpack-cli/INIT.md at master · webpack/webpack-cli · GitHub

HMR

• Error Hot Module Replacement is disabled.
  • devServer.hot - DevServer

  • Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js.

  • いずれかの方法をとる
    • webpack-dev-server --hot で起動する
    • devServer.hot を true, plugins に new webpack.HotModuleReplacementPlugin() を追加する

ビルドスピードを上げる

https://twitter.com/about_hiroppy/status/1111864268490764288

webpack のビルドスピードを上げるコツ

• uglify を parallel で動かす
• babel-loader 等の cache を有効にする
• externals で対象外にする
• cache-loader を利用する
• thread-loader を利用する

TypeScript

• React & Webpack · TypeScript
• GitHub - s-panferov/awesome-typescript-loader: Awesome TypeScript loader for webpack

webpack-serve

• webpack-contrib/webpack-serve
  • (2018-09) webpack-dev-server の後継になるはずだったが deprecated に
    • Update README.md · webpack-contrib/webpack-serve@edaf28c · GitHub
  • webpack-serve - npm
    • npm に公開されている fork 版は更新が入ってるようにみえるし deprecated のテキストも消されている
    • shellscape/webpack-serve
• webpack-contrib/webpack-hot-client
  • docs: Difference with Webpack Hot Middleware · Issue #18 · webpack-contrib/webpack-hot-client · GitHub