
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'
}
};
これで基本的にどこのディレクトリにも出力先を設定することができます。プロジェクトごとにディレクトリ構成の制約がある場合には使えるかと思います。categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)