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

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

ただいまの
回答率

91.27%

  • JavaScript

    11737questions

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

  • HTML

    6424questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Sass

    184questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • webpack

    111questions

Webpackでhtmlに使われている画像を別のフォルダにコピーしたい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 39

kumakuma112

score 10

普通のコーポレートサイトやLPでWebpack使ってみたところ、
SCSS内で使ってる画像は、file-loaderやurl-loaderで書き出せるが、
html内で使ってる画像の書き出し方法がわからず、画像の管理が半端になってしまいました。

srcフォルダにscss、js、imgを管理したいのですが、html内で使われている画像の書き出し方法がわからず困ってます。

sample/
├─ docs/
│   ├─ index.html                 トップページ
│   ├─ img/                       htmlで使ってる画像
│   ├─ dist/                      ビルド後のファイルが書き出される場所
│
├─ src/
│   ├─ img/                       cssで使ってる画像
│   │
│   ├─ js/
│   │  ├─ common.js               すべてのJSをまとめてるファイル
│   │
│   ├─ scss/
│      ├─ common.scss             すべてのscssファイルをまとめてるファイル
│      ├─ index.scss              ページ用
│      
├─ .babelrc
├─ .eslintrc.js
├─ package.json
├─ webpack.config.js              SCSSとJSのビルド設定
import webpack from 'webpack';
import path    from 'path';
import glob    from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import autoprefixer from 'autoprefixer';
import precss from 'precss';

//scssファイルのエントリー設定
const scssBasePath = path.resolve(__dirname, 'src/scss/');
const scssTargets = glob.sync(`${scssBasePath}/[^_*]*.scss`);
const scssEntries = {};
scssTargets.forEach(value => {
  const re = new RegExp(`${scssBasePath}/`);
  const key = value.replace(re, '').replace('.scss', '');;
  scssEntries[key] = value;
});

//JSファイルのエントリー設定
const jsBasePath = path.resolve(__dirname, 'src/js/');
const jsTargets = glob.sync(`${jsBasePath}/[^_*]*.js`);
const jsEntries = {};
jsTargets.forEach(value => {
  const re = new RegExp(`${jsBasePath}/`);
  const key = value.replace(re, '').replace('.js', '');
  jsEntries[key] = value;
});


export default [
  {
    // ========================================================
    // CSS
    // ========================================================
    entry: scssEntries,
    output: {
      path: path.resolve(__dirname, 'docs/dist/css'),
      filename: '[name].bundle.css'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use:[
              'css-loader?sourceMap',
              'postcss-loader?sourceMap',
              'sass-loader?sourceMap'
            ]
          })
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '../img/[name].[ext]'
              }
            }
          ]
        }
        // {
          // 10KB以下の画像をBase64で出力
        //   test: /\.(jpe?g|png|gif|svg|ico)(\?.+)?$/,
        //   use: {
        //     loader: 'url-loader',
        //     options: {
        //       limit: 10240,
        //       name: '../img/[name].[ext]'
        //     }
        //   }
        // }
      ]
    },
    plugins: [
      new ExtractTextPlugin('[name].bundle.css')
    ],
    resolve: {
      // style-loader の中で、.jsファイルを拡張子なしで requireしているところがあるため、'.js'が必要
      extensions: ['.css', '.js']
    }
  },
  {
  // ========================================================
  // JS用モジュール
  // ========================================================
    entry: jsEntries,
    output: {
      path: path.resolve(__dirname, 'docs/dist/js'),
      publicPath: '/js/',
      filename: '[name].bundle.js'
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    },
    plugins: [
      /* use jQuery as Global */
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
      })
    ],
    resolve: {
      extensions: ['.js']
    }
  }
];
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

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

ただいまの回答率

91.27%

関連した質問

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

  • JavaScript

    11737questions

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

  • HTML

    6424questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Sass

    184questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • webpack

    111questions