やりたこと

parceljsでJSとCSSの出力先フォルダを分けたい。

環境

  • yarn 1.10.0
  • parcelJS 1.12.4
  • laravel6
  • Wndows10

やったこと

leafletを利用する際に、

yarn add leaflet

とし、node_modules配下に追加します。


そして、resources/css/leaflet/leaflet.jsというファイルに以下のコードを書きます。

import 'leaflet/dist/leaflet.css';
let L = require('leaflet');

その後、

yarn dev

を実行し、コンパイルを行いました。
そのときのpachage.jsonが以下になります。

{
"scripts": {
    "dev": "yarn cache clean && parcel watch --no-source-maps ./resources/js/* -d ./public/js/",
    "build": "parcel build <your entry file>"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "dependencies": {
    "leaflet": "^1.5.1"
  }
}

すると、/public/js/配下に.jsファイル.cssファイルいくつかの画像ファイルが出力されてしまいました。
画像が必要なCSSな以上、CSSファイルの同階層に画像ファイルが出力されることは仕方ないと思いますが、
せめてフォルダを分けたいと思うので、以下のようにpachage.jsonを変更してみました。

{
"scripts": {
    "dev": "yarn cache clean && parcel watch --no-source-maps ./resources/js/* -d ./public/js/ && parcel watch ./resources/css/* -d ./public/css/",
    "build": "parcel build <your entry file>"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "dependencies": {
    "leaflet": "^1.5.1"
  }
}

そして、resources/css/leaflet.jsを追加します。

import 'leaflet/dist/leaflet.css';

しかし、コンパイルはされませんでした。

parcelではこういった、フォルダ分けはできないのでしょうか。
ご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。

設定ファイルの参考: https://nnahito.com/articles/46