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' } };これで基本的にどこのディレクトリにも出力先を設定することができます。プロジェクトごとにディレクトリ構成の制約がある場合には使えるかと思います。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories