常連

###質問概要
jsxのimgタグのsrc属性に関する質問です。
今、ディレクトリの構造が下記のようになっているとします。

root/
├ images/
│ └ sample.png 
├ public/
│ ├ bundle.js 
│ └ index.html
├ src/ 
│ ├ components/ 
│ │ └ Header.jsx
│ └ index.jsx 
├ package.json
└ webpack.config.js

`Header.jsx`の`<img>`のsrc属性値として`images/sample.png`を読み込ませようと思い、方法①と方法②を試しました。


###方法①
方法①では`Header.jsx`を下記のようにしました。

```jsx
import React from 'react';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src="../images/sample.png"
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

しかし、画像は表示されず、コンソールには`not found`と表示されてしまいます。
（ちなみに、webpackによってトランスパイルされ`public/bundle.js`として出力されます。）


###方法②
そこで、方法②では`url-loader`をインストールし、`webpack.config.js`に下記を追加し、`Header.jsx`も以下のように書き換えました。

```js
{
   test: /.png$/,
   loader: 'url-loader?mimetype=image/png',
}
```

```jsx
import React from 'react';

import imgUrl from '../../images/sample.png';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src={imgUrl}
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

上記のようにすると、うまく画像が表示されます。

###質問まとめ
方法①で画像が表示されない原因は何なのでしょうか？
（できるだけ方法①を採用したいと考えています。）
何かご回答をいただけると非常に助かります。

React.jsにおけるimgタグのsrc属性の記述方法について

# 概要
コードを実行前に下記のようなエラーが発生し、コードを実行出来ません。
```JSON
{ 
  "errorType":"Error",
  "errorMessage":"Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "stack":["Error: Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "    at Object../node_modules/axios/node_modules/form-data/lib/form_data.js (/var/task/app.js:41266:7)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/env/FormData.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/env/FormData.js:2:1)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/index.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/index.js:124:15)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/transformData.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/transformData.js:4:16)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/dispatchRequest.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/dispatchRequest.js:4:21)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)"]
  }
```
エラーの内容はaxiosモジュールのform-dataが見つからないという内容になります。

# 直前に行った事
Webpackやaxiosのモジュールを最新バージョンにアップデートしました。

# 現状の解決方法
1. エラーが発生した後、webpack watchを解いて再度webpack watchを行う
2. `npm cache verify`でキャッシュを削除
こうすると、エラーが消えますが、何度かコードを実行したり、時間が経過するとまた同じエラーが発生します。

# 質問
エラーの発生するようになった原因は、モジュールのアップデートにあるように思えます。
検索していますが、axiosでform-data.jsが見つからないというケースは見当たらず困っております。

怪しい部分などご指摘お願い致します。

## 追記
下記を試しましたが、エラーは解消されませんでした。
`rm -rf package-lock.json node_modules/`を行い、`npm install`

webpack
```Javascript
import { Configuration } from 'webpack';
const AwsSamPlugin = require("aws-sam-webpack-plugin");
const awsSamPlugin = new AwsSamPlugin();

const config: Configuration = {
  entry: awsSamPlugin.entry(),
  output: {
    filename: "[name]/app.js",
    libraryTarget: "commonjs2",
    path: __dirname + "/.aws-sam/build/"
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".js", ".json"]
  },
  target: "node",
  externals: process.env.NODE_ENV === "development"
    ? ["chrome-aws-lambda","@google-cloud/bigquery", "sharp"]
    : ["aws-sdk","chrome-aws-lambda","@google-cloud/bigquery","sharp"],
  mode: process.env.NODE_ENV || "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      }
    ]
  },
  plugins: [
    awsSamPlugin
  ],
}

export default config
```

tsconfig
```JSON
{
  "compilerOptions": {
    "target": "es2019",
    "module": "commonjs",
    "allowJs": true,
    "strict": true,  
    "esModuleInterop": true,
    "rootDir": ".",
    "outDir": "./built",
    "sourceMap": true
  },
  "include": [
    "./src/**/*"
  ],
}
```

モジュールのビルドが失敗する。

### 実現したいこと
VS CodeでTypeScript×Express.jsのAPIをWebPackの開発サーバーで実行できるようにしたいです。　

back-end/srcにメインのapp.tsを配置してテスト用のメソッドを用意しています。

まずコマンドから実行できるかのテストをしています。

・cd back-end、npm run build、npm run startコマンド実行後、localhost:5000にアクセスするとHello Worldを表示できる。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-01/adcf82e3-fe37-4e54-a710-6d20cd1f3d44.png)

・サーバーを停止してから、npm run devコマンド実行後、localhost:5000にアクセスするとコマンド実行自体は成功する(警告もなし)が、ブラウザアクセス時にCannot GET / となる。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-06-01/ac8eb27c-e6d9-44c8-bac7-4a61f053fd6e.png)

のようになり、npm run dev時にうまくいきません。

原因わかるかたいらっしゃいましたら、アドバイスいただきたいです。
よろしくお願いいたします。

### プロジェクト構成、設定ファイル、app.tsなど

```project
// プロジェクト構成

root-project
    - .vscode
    - back-end
        - dist
        - src
            - app.ts
    - eslintrc.js
    - package.json
    - tsconfig.json
    - webpack.config.js 
```

```package.json
{
  "name": "back-end",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node dist/bundle.js",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack serve --config webpack.config.js"
  },
  "dependencies": {
    "cookie-parser": "^1.4.4",
    "cors": "^2.8.5",
    "debug": "^2.6.9",
    "ejs": "^2.6.1",
    "express": "^4.16.1",
    "helmet": "^7.0.0",
    "http-errors": "^1.6.3",
    "jade": "^1.11.0",
    "morgan": "^1.9.1"
  },
  "devDependencies": {
    "@types/cookie-parser": "^1.4.3",
    "@types/cors": "^2.8.13",
    "@types/debug": "^4.1.8",
    "@types/express": "^4.17.17",
    "@types/http-errors": "^2.0.1",
    "@types/morgan": "^1.9.4",
    "@types/node": "^20.2.5",
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^34.0.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "html-webpack-plugin": "^5.5.1",
    "prettier": "^2.8.8",
    "rimraf": "^5.0.1",
    "source-map-loader": "^4.0.1",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4",
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0",
    "webpack-node-externals": "^3.0.0"
  }
}
```

```tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "src",
    "sourceMap": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

```webpack.config.js
const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  mode: "development",
  entry: "./src/app.ts",
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devtool: "source-map",
  externals: [nodeExternals()],
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      }
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 5000,
    devMiddleware: {
      publicPath: "/dist",
    },
    hot: true,
    // historyApiFallback: true,
  },
};
```

```app.ts
// express-generatorで作成したapp.jsをsrc/app.tsに変更し、コードをTypeScript化したもの

import express, { Request, Response, NextFunction } from "express";
import cookieParser from "cookie-parser";
import createError from "http-errors";
import logger from "morgan";

const app = express();

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

// テスト用Hello World
app.get("/", (req, res) => {
  res.status(200).send("Hello, World!");
});

const port = 5000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

/* 一旦コメントアウト
// catch 404 and forward to error handler
app.use((req: Request, res: Response, next: NextFunction) => {
  next(createError(404));
});

// error handler
app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});
 */
```



VS CodeでTypeScript×Express.jsのAPIをWebPackの開発サーバーで実行できるようにしたい。

### 実現したいこと

- [ ] viteでminifyされた全てのjsの先頭に「/*! For license information please see LICENSE */」コメントを追記したい

### 試したこと

Nuxt3でbuildにviteを使ってます。
webpack5で自動で生成されていたminifyへの上記コメントをvite(esbuildでもterserでも実現可能ならどちらでもOK)でも再現したいです。

### 発生している問題・エラーメッセージ

調べた感じですと、optionがとくになさそうでして、build時に以下ようなshを実行させて試しに直接minifyをいじってみましたが、

```
# minifyされたjsの先頭に「'/*! For license information please see LICENSE */ '」を付与する
for js in $( ls .output/public/_nuxt/*.js ); do
  echo '/*! For license information please see LICENSE */' | cat - $js > temp && mv temp $js
done
```

これをやってしまうとminifyが壊れたとブラウザconsoleで以下のようなerrorがでてしまいます。

```
Uncaught SyntaxError: Unexpected end of input
```

どなたか実現方法についてアドバイスなどいただけましたら、幸いです。Nuxtでなくてもviteを使ってらして、ライセンスを表記したい方などどうしているのでしょうか。

viteでminifyされた全てのjsの先頭に「/*! For license information please see LICENSE */」コメントを追記したい

動画教材を見ながら、サンプルアプリを開発しています。

教材に則って、webpack-dev-server でローカルにサーバーを立ち上げて確認をしています。
コマンドをうちこみ、サーバーを立ち上げたときに、
```
Project is running at http://localhost:8080/
```
と出てくるので、chromeからアクセスしようとするのですが、
> このページは動作していません
localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE

との結果が表示されてしまいます。
こちらはSafariでも同様の結果が返ってきていることを確認しました。

ですが、`127.0.0.1:8080`であればアクセスできていることを確認できました。

これを`localhost`でもアクセスできるようにしたいです。
恐らく、過去の自分がローカル環境を変更したのかと思っているのですが、どこをいじったかは分かっておりません。
また、こういったトラブルが起こった際の、適切な問題の切り分け手順が分かっていないです。

是非ご教示頂けますと幸いです。

宜しくお願いいたします。

localhost:8080 に接続ができない。

node_modulesについて詳しく知りたいです。

私の現状の理解だと、npmなどでインストールした開発に必要なライブラリなどのバージョンの依存関係を管理しているフォルダ群という感じです。

今回質問した経緯としては、https://github.com/liady/webpack-node-externals こちらのリポジトリを見ていて、気になる文面があったからです。

```
Webpack allows you to define externals - modules that should not be bundled.

When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
(Inspired by the great Backend apps with Webpack series)
--- 

バックエンドをWebpackでバンドルする場合、通常はnode_modulesの依存関係をバンドルしたくありません。このライブラリは、Webpackでバンドルする際にnode_modulesを無視するexternals関数を作成します。
このライブラリは、Webpack でバンドルする際に node_modules を無視する externals 関数を作成します。
```

backendでは依存関係をバンドルしたくないというのはどういうことでしょうか？
フロントエンドでもバンドルしたくないのでは？

稚拙な質問で恐縮ですがお答えいただけると幸いです????‍♂️

node_modulesとは何なのでしょうか？

### 前提

Laravelで自作WEBアプリ開発をしています。
下記記事によると、JavaScript、jQueryを使用する際
**webpack.mix.js**を使用するのがベストだそうですね。

ということで、**webpack.mix.js**を編集しようとしてみました。
しかし、**webpack.mix.js**はどこにも存在しませんでした。

### 参考記事
[Laravelでjavascript、jQueryを使う方法](https://dkssksk.com/laravel-javascript-jquery/)
[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)

### 実現したいこと

- Laravelでwebpack.mix.jsを利用する
- LaravelでJavaScriptを使用する
- （LaravelでjQueryを使用する）



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

```package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vitejs/plugin-vue": "^3.0.1",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.1",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "vite": "^3.2.2",
        "vue": "^3.2.37"
    },
    "dependencies": {
        "jquery": "^3.6.1"
    }
}

```

【Laravel】webpack.jsが存在しない

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}