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

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

ただいまの
回答率

90.51%

  • webpack

    322questions

webpackで複数あるcssをjsに含めずに出力する方法

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,034
退会済みユーザー

退会済みユーザー

webpackで複数あるjsとcssのファイルをディレクトリ構造をそのままに、index.jsとindex.cssとして分離出力したいのですが、
index.scssファイルをindex.cssとして出力する際に、どうしてもindex.scssというファイル名で出力されてしまいます。

どのようにすれば拡張子を変更して出力することができるのでしょうか?
下記がwebpackファイルになります。

require('babel-polyfill');
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');
var glob = require('glob');


// js
const js_BasePath = path.resolve(__dirname, '../src/js/');
const js_targets = glob.sync(`${js_BasePath}/**/index.js`);
const js_entries = {};
js_targets.forEach(value => {
  const js_re = new RegExp(`${js_BasePath}/`);
  const js_key = value.replace(js_re, '');
  js_entries[js_key] = value;
});


// css
const css_BasePath = path.resolve(__dirname, '../src/style/');
const css_targets = glob.sync(`${css_BasePath}/**/index.scss`);
const css_entries = {};
css_targets.forEach(value => {
  const css_re = new RegExp(`${css_BasePath}/`);
  const css_key = value.replace(css_re, '');
  console.log(value);
  css_entries[css_key] = value;
});
console.log(css_entries);



module.exports = [{
  devtool: 'inline-source-map',
  context: __dirname,
  entry: js_entries,
  output: {
    path: path.join(__dirname, '../dist/js'),
    filename: '[name]'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.(jpg|png|gif)$/,
        exclude: /node_modules/,
        use: ['file-loader', 'url-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.vue']
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer({ browsers: ['> 1%'] })],
      }
    })
  ]
},{
  entry: css_entries,
  output: {
    path: path.join(__dirname, '../dist/style'),
    filename: '[name]'
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss-loader',
            'sass-loader'
          ]
        })
      }
    ]
  },
  resolve: {
    extensions: ['*', '.css', '.scss']
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name]',
      ignoreOrder: true,
      allChunks: true
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer({ browsers: ['> 1%'] })],
      }
    })
  ]
}];
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

同じタグがついた質問を見る

  • webpack

    322questions