マニュアル: webpack

投稿日: 更新日:

インストール

npm install --save-dev webpack
npm install --save-dev webpack-cli

コマンドは ./node_modules/.bin/webpack に格納されます。

また、package.json(npm)に以下のように書くと、 npm run buildで実行できるようになります。

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

基本的な概念

  • Entry: 入力
  • Output: 出力
  • Loader: JavaScriptファイル以外を扱えるようにするためのもの
  • Plugins: プロセス中に加工するもの

設定

基本フォーマット

以下のような感じです。

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

webpack.config.jsの書式

entry

entry: './index.js'のように文字列を渡すと、名前は'main'になっているようです。

If a string or array of strings is passed, the chunk is named main.

module

以下の3つが指定可能

  • 絶対パス
  • 相対パス(...で始まる)
  • モジュールパス

output

主なオプション

  • filename: 出力ファイル名
  • path: 出力パス(絶対パス)
  • libraryTarget: ライブラリのエクスポート方法
    • Authoring Librariesも参照。
    • よく使いそうなのは以下の2つかなと。
    • var: 変数として定義
    • umd: 環境によって自動割り当て
  • library: varの場合は変数名

webpack.config.jsには以下のように記載する。

const path = require('path');

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'bundle.js'
  }
}

resolve

主なオプション

  • alias: importしたときのパスのaliasをつくる
    • 表を見てピンとこないときは、まずModule Resolutionを見たほうが良さそう>です。

alias

  • '$'で終わる場合は、完全一致になります。
  • 解決した結果がディレクトリの場合はindex.jsとなっていますが、これはpackage.json(npm)で別のものにできるようです。

プラグイン

最小化

Minification参照。

  1. UglifyJSPluginを使う
  2. --optimize-minimizeを使う

requireに変数があるときの挙動

require with expressionによれば、 require("./template/" + name + ".ejs");のように、 変数nameを含むようなパターンがあるときは、 「全ての文字」にマッチするように正規表現が作られます。

これによって、全てのファイルが取り込まれ、 正常に動作しますが、その代償として、不要なファイルが含まれる可能性があります。 これを制御するためには、ContextReplacementPluginを使うとよいです。

公式サイト

外部サイト

逆引きマニュアル