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

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram