質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

4462閲覧

Webpackで余分なファイルを作らずJSとCSSを別のディレクトリに出力したい

nuages

総合スコア40

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2018/12/06 15:44

Webpack 4 を使って SCSS と JS をコンパイルしようとしています。
スクリプトは JS フォルダに、スタイルシートは CSS フォルダにそれぞれ出力しようと思い、一応はできたのですが CSS フォルダに抽出後の意味のない JS ファイルが残ってしまうのが気になっています。

設定ファイルは次のようになっています。

module.exports = { entry: { "js/app": ["./src/js/app.js"], "css/app": ["./src/scss/app.scss"] }, output: { filename: "[name].js", path: path.resolve(__dirname, "dist") },
plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }),

出力されたファイルは
css/app.css
css/app.js
js/app.js
の3ファイルで、css/app.js はCSSファイルを抽出するだけに作られた使いみちのないものです。(中身は「// extracted by mini-css-extract-plugin」のようになっています)

調べた限りではoutputを同じ名前にして上書きされるようにするといいという情報があったのですが「Conflict: Multiple chunks emit assets to the same filename css/app.css」のように同じ名前がかぶっていると出力できませんでした。

どうにかして css/app.js のような余分なファイルを作ることなく JS と CSS ファイルをそれぞれのフォルダに出力したいのですがどのようにすればいいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

私も同じところでハマりました・・・

「Conflict: Multiple chunks emit assets to the same filename xxx.css」
が出ていて悩んでいたのですが、下記のような記述に変更したら上記のエラーが出なくなりました。

js

1plugins: [ 2 new MiniCssExtractPlugin({ 3 filename: './[name].css', // ← ここに「./」を追加 4 }) 5],

投稿2018/12/13 11:08

-tomomo-

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nuages

2018/12/13 13:22

回答有り難うございます。エラー自体は教えていただいた記述で解消しました。しかし出来上がったapp.cssをみると中身がスクリプトになっているので、cssをjsで上書きしてしまっている状況のようです。jsをcssで上書きする順番にできたらいいのですが何か間違っているのでしょうか?
-tomomo-

2018/12/14 03:50

すみません、エラーが消えたことに喜んでコメントしてしまいましたが帰宅後NGなことに気づきました。 いろいろ試した結果、どうしてもJSとCSSが一緒に出力されてしまうため、私の方は下記のURLを参考に「extract-text-webpack-plugin」を使用する方法にしました。 https://ics.media/entry/17376#text-extract-plugin
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問