Skip to content

Instantly share code, notes, and snippets.

@qrg
Created July 15, 2020 03:20
Show Gist options
  • Save qrg/a67088082b79364bd48dbdb6877a6e09 to your computer and use it in GitHub Desktop.
Save qrg/a67088082b79364bd48dbdb6877a6e09 to your computer and use it in GitHub Desktop.
old memo

Webpack

Plugins

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

loaders

Webpack 4

init

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.hottrue, pluginsnew webpack.HotModuleReplacementPlugin() を追加する

ビルドスピードを上げる

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

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

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

TypeScript

webpack-serve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment