常連

現在Reactの勉強を始めた初学者です。
標題の通り、jsファイルをビルドさせたいのですが下記エラーで詰まっています。
原因が分かる方がいましたらご教示願います。
宜しくお願いします。

エラー内容

```ここに言語を入力
PS C:\Users\ak198\Desktop\react_redux> gulp
[20:16:40] Using gulpfile ~\Desktop\react_redux\gulpfile.js
[20:16:40] Starting 'default'...
[20:16:40] Starting 'compile'...
[20:16:40] Starting 'browser-sync'...
[20:16:40] Starting 'watch'...
[20:16:41] 'compile' errored after 1.13 s
[20:16:41] Error: File not found with singular glob: C:/Users/ak198/Desktop/react_redux/.src/js/app.js (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (C:\Users\ak198\Desktop\react_redux\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (events.js:315:30)
    at emitOne (events.js:116:13)
    at Glob.emit (events.js:211:7)
    at Glob._finish (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:197:8)
    at done (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:182:14)
    at Glob._processSimple2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:688:12)
    at C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:676:10
    at Glob._stat2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:772:12)
    at lstatcb_ (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:764:12)
    at RES (C:\Users\ak198\Desktop\react_redux\node_modules\inflight\inflight.js:31:16)
    at f (C:\Users\ak198\Desktop\react_redux\node_modules\once\once.js:25:25)
    at FSReqWrap.oncomplete (fs.js:152:21)
[20:16:41] 'default' errored after 1.14 s
[20:16:41] The following tasks did not complete: browser-sync, watch
[20:16:41] Did you forget to signal async completion?

```

glupfile.js
```
const gulp = require("gulp");
const watch = require("gulp-watch");
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const browserSync = require("browser-sync").create();
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config.js");

gulp.task("compile", function () {
  return gulp.src([
    ".src/js/app.js",
  ])
    .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
    .pipe(webpackStream(webpackConfig), null, function(err, stats) {
      if (stats.compilation.errors.length > 0) {
        notify({
          title: "webpack error",
          message: stats.compilation.errors[0].error
        });
      }
    })
    .pipe(gulp.dest("js"))
});

gulp.task("browser-sync", function () {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task("watch", function () {
  watch(["./src/js/**/**.js"], function () {
    gulp.setMaxListeners(["compile"]);
  })
  watch(["./**/*.html", "./js/**.*js"], function () {
    browserSync.reload();
  })
})

gulp.task("default", gulp.series(gulp.parallel("compile", "browser-sync", "watch")));
```

webpack.config.js
```
module.exports = {
  /* ビルドの起点となるファイルの設定 */
  entry: './src/js/index.js',
  /* 出力されるファイルの設定 */
  output: {
    path: '/js', // 出力先のパス
    filename: 'bundle.js' // 出力先のファイル名
  },
  module: {
    /* loaderの設定 */
    rules: [
      {
        test: /.(js|jsx)$/, // 対象となるファイルの拡張子（正規表現可）
        exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
        loader: 'babel-loader', // 使用するloader
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};
```

gulp.taskを実行しwebpackでjsファイルをビルドさせたい

### 前提・実現したいこと

現在、Chromeの拡張機能の開発をしており、プロトタイプが完成したため、webpackやbabelできちんと大規模に作成できるように移行をしています。

### ファイル構成

現在ファイル構成は、ルートディレクトリが

```
.
├── dist
├── index.js
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js
```

上記のようになっており、さらに、srcフォルダの中は


```
src.
├── components
├── htmls
│   └── atcoder.html
├── images
│   ├── large_icon.png
│   └── small_icon.png
├── manifest.json
├── scripts
│   ├── background
│   │   └── icon_click.js
│   ├── background.js
│   ├── options
│   ├── options.js
│   ├── popup
│   ├── popup.js
│   └── third
│       └── jquery-3.3.1.min.js
└── styles
```

上記の様になっています。

### webpackの設定

```javascript
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        background: path.join(__dirname, 'src', 'scripts', 'background.js'),
        popup: path.join(__dirname, 'src', 'scripts', 'popup.js'),
        options: path.join(__dirname, 'src', 'scripts', 'options.js')
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'scripts/[name].bundle.js',
    },
    target: "web",
    resolve: {
        extensions: ['ts', '.js'],
        modules:
            [
                'node_modules',
                path.resolve(__dirname, 'src')
            ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port:
            9000,
        hot:
            true,
    }
    ,
    module: {
        rules: [
            {
                test: /.js$/,
                use: {loader: 'babel-loader'}
            }
        ]
    }
    ,
    plugins: [
        new CopyWebpackPlugin(
            [
                {
                    from: path.join(__dirname, 'src', 'manifest.json'),
                    to: path.join(__dirname, 'dist'),
                },
                {
                    from: path.join(__dirname, 'src', 'htmls'),
                    to: path.join(__dirname, 'dist/htmls')
                },
                {
                    from: path.join(__dirname, 'src', 'images'),
                    to: path.join(__dirname, 'dist/images')
                },
                {
                    from: path.join(__dirname, 'src', 'components'),
                    to: path.join(__dirname, 'dist/components')
                },
                {
                    from: path.join(__dirname, 'src', 'styles'),
                    to: path.join(__dirname, 'dist/styles')
                }
            ]
        )
    ]
}

```

### package.jsonの設定

```json
{
  "name": "atcoder_save",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "start": "webpack --watch  --mode=development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.2",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
}

```

### 発生している問題・エラーメッセージ

src/scrpits/background.jsから、src/scripts/background/icon_click.jsを読み込もうと考えています。(background.jsがentryで、backgroundフォルダの中のソースコードが実際の実装。)

しかし、以下のようなエラーが表示されてしまいます。


```
ERROR in ./src/scripts/background.js
Module not found: Error: Can't resolve 'background/icon_click' in '/Users/ganariya/Desktop/AtCoder_Save/src/scripts'
 @ ./src/scripts/background.js 3:15-47
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! atcoder_save@1.0.0 build: `webpack --mode=development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the atcoder_save@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
```

webpackがなにかエラーをやらかしているのだと考えます。

### 該当のソースコード

background.js
```javascript
const {func} = require('background/icon_click');
func();
```

background/icon_click.js
```javascript
function func() {
    console.log("func");
}

module.exports.func = func;
```

### 試したこと

いろいろと、ネットを調べて、モジュールを最新にしたり、よくあるエラーミスを試したのですが、治すことができませんでした。

### 補足情報（FW/ツールのバージョンなど）

OS:Mac
IDE: WebStorm
フレームワーク: Webpack + babel + chrome extension

WebpackのCan't resolveがどうしても解消できない

問題）
jquery.lazyload.jsと$(○○).lazyloadを利用する.jsファイルを結合する
ためimport及びrequireで定義、下記設定のwebpackでコンパイルを実行、
その後、index.jsx内の<script src='結合した.js'></script>と定義
すると、require is not definedとエラーになる
開発環境）
・jQueryからReact.jsベースに書き換えるため、コンパイル結合にwebpack
を利用（gulp、grantは本件では扱わないため除外します）
・express(node.js)のapp.jsで、css/jsのhtml(.jsx)から./及び/で
アクセスできるリンク先をプロジェクト名/publicに指定 →よって、index.jsx
(プロジェクト名/views)から<script src=○○.js></script>を指定する
には、プロジェクト名/public内に記載しなければ参照できない 
→ ☓ ./../別のjsファイル.js
状況）
webpackでコンパイルした筈の.jsファイルをindex.jsxで<script src・・・
から指定すると、require is not definedとエラーになる
→ では、index.jsx内に複数のjsを網羅的に<script src・・・を複数記載
すればいいのでは？と思いやってみるが、今度は、js同士の結合ができていない
状態（jquery.lazyload.jsと$(○○).lazyloadを使うjsファイル）となり、
lazyload is not definedとエラーになる（別issueに記載、.ejsでは
問題ないが、.jsx内に書くからそうなるのか？現在質問済み、回答待ち）
```
webpack.config.jsコード）
var webpack = require ('webpack');
var webpackNodeExternals = require ('webpack-node-externals');
module.exports = {
  target :'node',
  entry :{
    jsA :'./○○/○○.js
    jsB :'./○○/○○.js
    jsC :'./○○/○○.js
  },
  output :{
    path :__dirname + '/○○/○○',
    filename :[name].js
  },
  context :__dirname,
  node :{
    __filename :true,
    __dirname :true,
  },
  externals :[webpackNodeExternals()],
  module :{
    loaders :[
      {
         test :/\.js$/,
         exclude :/node_modules/,
         loader :'babel-loader',
         query :{
           presets :['es2015'],
         },
      },
    ],
  },
}, {
・・・
（React.js等をコンパイルする設定のため省略する）
};
```
.babelrcコード）
```
{
  "presets" :["es2015", "react"]
}
```
○○.jsコード）
import $ from 'jquery';
import '・・・/jquery-lazyload.js';又は、require ('jquery.lazyload.cjs')($)の両方試している

webpack.config.jsに適切な設定をしているのにimport又はrequireがコンパイルされておらず、require is not definedと怒られる

## 前提・実現したいこと
expo startを実行して、エラーが発生しない状態にしたい

## 発生している問題
expo startを実行すると以下のようなエラーが表示されます。
```
$ expo start

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (4.13.0).                │
│   You are currently using expo-cli 4.12.1                               │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
Starting project at /Users/ユーザー名/Documents/アプリ名
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Cannot find module '@babel/code-frame'
Require stack:
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/node-haste/DependencyGraph.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/Bundler.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/IncrementalBundler.js
- /Users/ユーザー名/Documents/アプリ名/node_modules/metro/src/Server.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/metro/importMetroFromProject.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/HermesBundler.js
- /usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/build/MetroDevServer.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/start/startDevServerAsync.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/internal.js
- /usr/local/lib/node_modules/expo-cli/node_modules/xdl/build/index.js
- /usr/local/lib/node_modules/expo-cli/build/exp.js
- /usr/local/lib/node_modules/expo-cli/bin/expo.js
```

## 試したこと
①Cannot find module '@babel/code-frame'と表示されているので、
```
$ expo install @babel/code-frame
```

②こちらのサイト(https://www.mongodb.com/community/forums/t/chapter0-ticket-connection-cannot-find-module-babel-register/98937/6)の中段あたりの記載内容を参考に、
```
$ npm uninstall packeage-lock.json node_modules/
$ expo install

```

③先程のサイト（https://www.mongodb.com/community/forums/t/chapter0-ticket-connection-cannot-find-module-babel-register/98937/6）の記載事項の少し下にある、
```
$ npm install --legacy-peer-deps
```

## 補足情報（FW/ツールのバージョンなど）
Expo v4.12.1
node v14.16.0

##
ほぼ一日調べていますが、まだ解決に至っておりません。。
お力をお借りしたいです。よろしくお願いいたします。

expo start実行時のエラーを解決したい

### 実現したいこと
htmlにおいて、lang='ja'の時、
<h1>{{ _('home') }}</h1>について、

「ホーム」と翻訳して表示したい。


### 発生している問題・分からないこと
langの指定を変えても、翻訳が適用されない。

### エラーメッセージ
```error
#ターミナルやコンソールではエラーを確認できませんでした。
```

### 該当のソースコード

```py
#main.py
from app import create_app
import webbrowser
import threading

def open_browser():
      webbrowser.open_new('http://127.0.0.1:5000/?lang=ja')
      #webbrowser.open_new('http://127.0.0.1:5000/?lang=en')

app = create_app()

if __name__ == '__main__':
    threading.Timer(1.25, open_browser).start()
    app.run(debug=True)

#config.py
class Config:
#秘密鍵は設定しています。
    SECRET_KEY = ""
    LANGUAGES = {
    'en': 'English',
    'ja': '日本語'
    }
    BABEL_DEFAULT_LOCALE = 'en'
    BABEL_TRANSLATION_DIRECTORIES = './locale'
```

```app/.py
#app/__init__.py
from flask import Flask, request, g
from flask_babel import Babel
from config import Config

def create_app():
    app = Flask(__name__)
    app.config.from_object(Config)

    # get_locale関数を定義
    def get_locale():
        # リクエストの引数から言語設定を取得し、なければデフォルトの言語設定を使用
        return request.args.get('lang', app.config['BABEL_DEFAULT_LOCALE'])

    # Babelインスタンスを作成し、locale_selectorパラメータにget_locale関数を渡す
    babel = Babel(app, locale_selector=get_locale)

    # get_locale関数をテンプレートのグローバル関数として登録
    @app.context_processor
    def context_processor():
        return dict(get_locale=get_locale)

    from . import routes
    routes.init_app(app)
    
    return app

#app/routes.py
from flask import render_template
from flask import current_app as app

def init_app(app):
    @app.route('/')
    def home():
        return render_template('01_home.html')

    @app.route('/loading')
    def loading():
        return render_template('02_loading.html')

    @app.route('/select')
    def select():
        return render_template('03_select.html')

    @app.route('/answer')
    def answer():
        return render_template('04_answer.html')  
```

```babel.cfg
[python: **.py]
[jinja2: app/templates/**.html]
jinja2_extensions = jinja2.ext.autoescape,jinja2.ext.with_,jinja2.ext.i18n
```

```messages.po
# Japanese translations for PROJECT.
# Copyright (C) 2024 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR <EMAIL@ADDRESS>, 2024.
#
msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2024-03-16 15:07+0900\n"
"PO-Revision-Date: 2024-03-16 10:24+0900\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language: ja\n"
"Language-Team: ja <LL@li.org>\n"
"Plural-Forms: nplurals=1; plural=0;\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.14.0\n"

#: app/templates/00_base.html:6 app/templates/00_base.html:13
#: app/templates/01_home.html:3
msgid "title"
msgstr "タイトル"

#: app/templates/01_home.html:3 app/templates/01_home.html:6
msgid "home"
msgstr "ホーム"

```

```html
00_base.html
<!DOCTYPE html>
<html lang="{{ get_locale() }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{% block title %}{{ _('title') }}{% endblock %}</title>
        
    </head>
    <body>
        {% block content %}
            <header>
                <div>
                    <h1>{{ _('title') }}</h1>
                </div>
            </header>
        {% endblock %}
    </body>
</html>

01_home.html
{% extends '00_base.html' %}

{% block title %}{{ _('home') }} | {{ _('title') }}{% endblock %}

{% block content %}
    <h1>{{ _('home') }}</h1>
{% endblock %}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
<html lang="{{ get_locale() }}">がうまくいっていないのかと思い、コンソールを確認しましたが、正常に機能していました。
localeを消してみても何の変化も見られなかったので、loceleフォルダの参照が上手くできていないのかもしれません。

### 補足
構造は下記のようになっています。
・config.py
・babel.cfg
・main.py
・messages.pot
・locale/ja/LC_MESSAGES/messages.po, messages.mo
・app/models.py, __init__.py, routes.py, static/, templates/

Babelの国際化について、web上で翻訳が適用されない。

ES6+react.js(15.3.2)をbabelで変換して使っています。
親コンポーネントから、formを持つ子コンポーネントへ初期値をstateで渡したいのですがうまくいきません。propsで渡すとformを変更できなくなってしまいます。
なお、うまくいけばformの変更を親から利用しようと考えています。


```react.js
class UMU extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.value};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});    
    this.props.onEventCallBack({ value: event.target.value });
  }

  render() {
    return (
      <form>
        <label>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="0">なし</option>
            <option value="1">あり</option>
          </select>
        </label>        
      </form>
    );
  }
}

class Texts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    this.props.onEventCallBack({ value: event.target.value });
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>コメント:
          <input type="text" value={this.state.text} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

const json = {
    "name":"tanaka",
    "umu":"1",
    "comment":"foo"
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state =  {data:[]};
  }

  pushMessage(comment){
    console.log(comment);
  }

  componentDidMount() {
      this.setState({data: json});
    }
  render(props) {
    return (
        <div>
            <div>name:{this.state.data.name}</div>
            <UMU value={this.state.data.umu} onEventCallBack={this.pushMessage}/>
            <Texts value={this.state.data.comment} onEventCallBack={this.pushMessage}/>
        </div>
      );
  }
}
ReactDOM.render(<Box/>, document.getElementById('app'));
```

react.jsでformに初期値を持たせたい。

##実現したいこと

webpackでの制作環境を作っていまして、**pug.scss.js*は問題なく動作するのですが
　imgフォルダの画像がどうしてもページに表示されません。どうしてでしょうか？

### 構造

```tree
├── dist
│   ├── bundle.js
│   ├── index.html
│   └── src
│       └── assets
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   ├── img
|   |   |     ├── image.png
│   │   └── scss
│   ├── index.js
│   ├── index.pug
│   └── pug
│       ├── _footer.pug
│       ├── _header.pug
│       ├── _template.pug
└── webpack.config.js
```

```indexpug
extends ./pug/_template.pug

block append var
block main
  p.
    test
  img.test(src="./assets/img/image.png" alt="hoge")
  img(src=`${assets_dir}img/image.png` alt="hoge")

```
```webpackconfig
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 最適化オプションを上書き
  optimization: {
    minimizer: [
      new TerserPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },

  devtool: 'inline-source-map',

  //サーバーの設定 npm run start:dev
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    // watchContentBase: true,
    compress: true,
    port: 8000,
    open: true,
  },

  module: {
    rules: [
      // pug-loaderの設定
      {
        test: /.pug$/,
        use: ['pug-loader']
      },

      // babel-loaderの設定
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ],
        exclude: /node_modules/,
      },

      // css/sass-loaderの設定
      {
        test: /.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          'sass-loader'
        ]
      },

      // imgの設定
      {
        test: /.(png|svg|jpg|gif)/,
        use: [
          'file-loader',
        ]
      },
    ]
  },

  plugins: [
    new CleanWebpackPlugin(
      ['dist'],
      {
        // 除外するファイルやディレクトリを指定
        exclude: ['img']
      }
    ),
    new MiniCssExtractPlugin({
      filename: './src/assets/style.css'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    })
  ]
});

```
```packkagejson
{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development --watch",
    "start:dev": "webpack-dev-server --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.4.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.8.0"
  }
}

```

### 試したこと
画像以外の参考差分はその都度変更がかかるのですが、画像フォルダのみ色々試したのですが
表示されずにbuild後もdistフォルダにも生成されずに迷っております。

フロントエンドのwebpack環境構築【画像が表示されない】

### 前提・実現したいこと

ES6以上（Babelで変換可能な範囲内）で、「`const`変数にある関数の実行結果を代入」、そして「関数が例外を投げたら、実行中の関数からも抜ける」を実現したいのです。

### 発生している問題＆書いてみたソースコード

以下のように、いくつかのパターンを考えてみましたが、動くものについてもすっきりしない部分が残ります。

```javascript
function その1() {
  try {
    const val = someFunction();
  } catch(e) {
    // 例外処理略
    return;
  }
  // ここでメインの処理…をしようにも、
  // もうここではvalを使えない
}

function その2() {
  let val;
  try {
    val = someFunction();
  } catch(e) {
    // 例外処理略
    return;
  }
  // ここでメインの処理 
  // 動くけど、1度しか代入しないのでできればconstで書きたい
}

function その3() {
  try {
    const val = someFunction();
    // メインの処理を続ける

    // 動くけど、ネストが深くなる、catchで意図しない例外も拾ってしまうなど、
    // できればやりたくない
  } catch(e) {
    // 例外処理略
    return;
  }
}
```

### 補足情報（FW/ツールのバージョンなど）

* ブラウザ環境（モダンブラウザ、IE11など不特定）、Babel 6.26でトランスパイル