38elements.github.io - Webpackメモ

Webpackメモ

38elements.github.io Spined HTML

Webpackメモ Webpackメモ Document OptimizeCSSPlugin * CSSを最適化する。 UglifyJsPlugin * .jsを圧縮する HashedModuleIdsPlugin * モジュールの相対パスからモジュールIDを生成する ModuleConcatenationPlugin * モジュール同士を適切にマージして出力する CommonsChunkPlugin * 指定したエントリーポイント間で共通のモジュールを切り出して別ファイルとして出力する。 各エントリーポイントの出力には共通のモジュールは含まれない。 例 CompressionWebpackPlugin * 圧縮したファイルを生成する 例 BundleAnalyzerPlugin * resolve.alias * importするパスのエイリアスを登録する。 @はここで登録される entry * モジュールの始点を登録する {    モジュール名: ファイルパス } モジュール名はoutput.filenameで使用することができる devtool * sourcemapの設定 webpack-merge * 設定をmergeすることに使用する DefinePlugin * 指定した変数(キー)に指定した値(値)を格納して生成物に挿入する。 例 CopyWebpackPlugin * ファイルやディレクトリをコピーする。 例 HtmlWebpackPlugin * templateオプションで指定したHTMLファイルを加工してfilenameオプションで指定したファイル名に出力する Configuration * optionのtemplateについて * 例 DevServer * webpack-dev-serverがServer本体 inlineオプションはリロードするためのコードをbundleに入れるオプション Webpackで生成したファイルはディスクに出力されない。 メモリーに格納される。 * webpack-node-externals * NodeJS向けにアウトプットを生成したい場合などnode_modulesをbundleしたくないときにexternalsに指定して使用する。 options.output.libraryTarget * ライブラリとして出力するときにセットする。 umdをセットすることができる。 options.target * bundleして出力する際の形式をセットする。 デフォルトはweb NoEmitOnErrorsPlugin * コンパイル時にエラーが発生した場合、emitをスキップする(ファイルを生成しない) HotModuleReplacementPlugin * Hot Module Replacement(HMR)を有効にする NamedModulesPlugin * HMRが有効であるとき相対パスを表示する FriendlyErrorsPlugin * エラーをわかりやすく表示する 例 ExtractTextPlugin * バンドルされたファイルから指定した形式のテキストを別ファイルに移動させる 例 ≪vue-webpack-boilerplateメモ Main PostCSSメモ≫