parcel.jsでファイルごとの出力先を変更したい
やりたこと
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