【備忘録③】React & TypeScript & Webpack4 & Babel7 & dev-server の最小構成ボイラープレートの作成　-画像ファイル読み込み設定- #JavaScript

前回の記事で作成したボイラープレートに画像の読み込み設定を実装する。

使用するnpmモジュール

今回使用するモジュールは以下の通り。（使用するモジュールはすべてlatest）

モジュール名	バージョン	説明
url-loader	2.0.1	画像ファイル読み込みに必要

画像ファイルの読み込み用モジュールはurl-loaderとfile-loaderがあるが、指定したファイルのみを読み込むfile-loaderよりもurl-loaderの方がシンプルに実装できるので今回は、url-loaderを使用。（用途によって使い分け）

package.jsonへのモジュール追加とインストール

使用するnpmモジュールをpackage.jsonに追加する。

{
  "name": "react-ts-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "build-prod": "webpack --mode=production"
  },
  "keywords": [],
  "author": "kento75 <kento2github@gmail.com> (https://overreact.tk)",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.1",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

追加後、以下のコマンドを実行してnpmモジュールをインストールする。

$ npm install

webpack.config.jsファイルに設定追加

web pack.config.jsファイルにファイル読み込み用の設定を追加する。

また、前回css-loaderに設定したurl: falseをcss側からのファイル読み込みを行えるようにurl: trueに修正する。

const path = require ('path');
const rules = [
  /* TypeScript用の設定 */
  {
    // 対象とする拡張子を指定
    test: /\.tsx?/,
    // 対象から外すディレクトリを指定
    exclude: /node_modules/,
    // babelを使用する
    loader: 'babel-loader',
  },
  /* Sass用設定 */
  {
    // 対象とする拡張子を指定
    test: /\.scss$/,
    use: [
      // linkタグへの出力用
      'style-loader',
      // CSSのバンドル設定
      {
        loader: 'css-loader',
        options: {
///////////////  ここをtrueに変更  ///////////////
          // css内のurl()メソッドを取り込む設定
          url: true,
          // // ソースマップの有効化 development と production で勝手に切り替わるのでコメントアウト
          // sourceMap: true,

          // sass-loader と postcss-loader を使用するので 2 を設定
          // ここを参考に設定 https://github.com/webpack-contrib/css-loader#importloaders
          importLoaders: 2,
        },
      },
      'postcss-loader',
      {
        loader: 'sass-loader',
        // options: {
        // // ソースマップの有効化 development と production で勝手に切り替わるのでコメントアウト
        //   sourceMap: true,
        // }
      },
    ],
  },
/////  ここから追加  /////
  /* 画像ファイル用設定 */
  {
    // 対象となるファイルの拡張子を設定
    test: /\.(gif|png|jpg|jpeg|svg|ttf|eot|wof|woff|woff2)$/,
    // 画像をBase64で取り込み
    loader: 'url-loader',
  },
/////  ここまで追加  /////
];

module.exports = {
  // ブラウザ環境で使用するためwebをtargetとする
  target: 'web',
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'development',
  // 起点となるTSXファイル（エントリーポイント）
  entry: './src/index.tsx',
  // ビルド後の出力先設定
  output: {
    // 出力先パス
    path: path.resolve (__dirname, 'build'),
    // ファイル名
    filename: 'bundle.js',
  },
  module: {
    // ビルド時に使用するルール（上で設定）を設定
    rules,
  },
  resolve: {
    // 対象とする拡張子を指定
    extensions: ['.ts', '.tsx', '.js'],
  },
  // webpack-dev-serverの設定
  devServer: {
    // 起点となるパス
    contentBase: './',
    // ポート番号
    port: 5000,
  },
};

ここまでの設定で使用する準備は完了。

動作確認

動作を確認するためにindex.tsxでimageファイルを読み込む修正を行う。

あらかじめ、読み込み画像ファイルを<プロジェクトルート>src/assets/の下に配置しておく。

import React from 'react';
import ReactDOM from 'react-dom';
import './scss-style.scss';

// import でもできるが面倒なので、妥協して require を使用
const reactImg = require('./assets/img/react.png');

function App(): JSX.Element {
  const sum = (a: number, b: number): number => a + b;

  return (
    <React.Fragment>
      <div>
        <h1>React & TypeScript!</h1>
        <p>Test: {sum(15, 15)} </p>
      </div>
      <div className="scss-style" />
      <div className="sass-img" />
      <div>
        <img src={reactImg} alt="react" />
      </div>
    </React.Fragment>
  );
}

export default App;

const root = document.getElementById('app-root');

ReactDOM.render(<App />, root);

Sassファイルからも読み込みができることを確認するため、scss-style.scssを修正する。

.scss-style {
  background: #e47474;
  height: 15px;
  // ベンダープレフィックス確認用に適当に入れただけ
  transform: scale(2);
}

// Sassから画像を読み込む
.sass-img {
  height: 400px;
  padding: 0;
  margin: 0;
  background: url("./assets/img/vue.png") no-repeat;
}

実装が完了したら、以下のコマンドを実行して開発用サーバー起動することを確認する。

$ npm start

> react-ts-webpack@1.0.0 start /Users/kento/Programing/VScodeProjects/ts-react-sass-simple-boiler-v2
> webpack-dev-server --open

ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: 8f73de6147b59cb9288f
Version: webpack 4.35.0
Time: 2220ms
Built at: 2019-07-08 19:20:38
    Asset      Size  Chunks             Chunk Names
bundle.js  1.29 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:5000 ./src/index.tsx 40 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:5000] (webpack)-dev-server/client?http://localhost:5000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/assets/img/react.png] 31.3 KiB {main} [built]
[./src/index.tsx] 810 bytes {main} [built]
[./src/scss-style.scss] 1.35 KiB {main} [built]
    + 37 hidden modules
ℹ ｢wdm｣: Compiled successfully.

起動後、localhost:5000 にアクセスする。

画像ファイルが表示されること。画像ファイルのパスを確認。

以上で確認完了。

作成したボイラープレートはこちら

【備忘録③】React & TypeScript & Webpack4 & Babel7 & dev-server の最小構成ボイラープレートの作成 -画像ファイル読み込み設定-

使用するnpmモジュール

package.jsonへのモジュール追加とインストール

webpack.config.jsファイルに設定追加

動作確認

【備忘録③】React & TypeScript & Webpack4 & Babel7 & dev-server の最小構成ボイラープレートの作成　-画像ファイル読み込み設定-