OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

webpackで上層のディレクトリにバンドルしたファイルを出力する

タイトルの通りですが、webpackではバンドルしたファイルの出力先を絶対パスで指定するため、そのままですと上層のディレクトリへの出力ができません。そこでカレントディレクトリを基準としたパスの指定が必要になります。   今回のケースではこのようなディレクトリ構成を想定しています。webpackの設定ファイルはnode_modulesフォルダより上の階層へバンドルしたファイルを出力します。
dest
  ┣ bundle.js
  ┗ index.html
assets
  ┣ webpack.config.js
  ┗ src
    ┗ js
      ┣ entrypoint.js
      ┗ modules
        ┣ module_01.js
        ┣ module_02.js
        ┗ module_03.js
  結論から言うとwebpackの設定ファイルを下記のようにすることで対応できます。
const path = require('path');
module.exports = {
  mode: 'production', 
  entry: './src/js/entrypoint.js',
  output: {
    path: path.resolve(__dirname, '../dest'),
    filename: 'bundle.js'
  }
};
  これで基本的にどこのディレクトリにも出力先を設定することができます。プロジェクトごとにディレクトリ構成の制約がある場合には使えるかと思います。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram