More than 3 years have passed since last update.

webpack4の記事を見ながら実装していくとエラーしたので載せておく

Last updated at 2021-03-09Posted at 2021-03-09

環境

react
typescript
webpack 5.24.3
babel
emotion

上記使っていく予定で、Qiitaの他の方のwebpack4に対応した記事を参考にしながら、つまづいたことを記録していきます。

package.json

{
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.1",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.0",
    "ts-loader": "^8.0.17",
    "typescript": "^4.2.3",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
}

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "module": "ES2015",
    "lib": [
      "dom",
      "es2020"
    ],
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "noUnusedLocals": true,
    "typeRoots": [
      "node_modules/@types"
    ],
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
}

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    // webpack4の設定
    // publicPath: "dist"
  },
  
  devtool: "inline-source-map",
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
    })
  ],
  
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ['@babel/preset-env']
            }
          },
          {loader: "ts-loader"}
        ],
        exclude: /node_modules/,
      }
    ]
  },
  
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    // webpack5ではoutputからここに移動させる
    publicPath: "dist",
    host: "localhost",
    port: "3000",
    open: true,
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ]
}

package.json

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w",
    // webpack4では、
    // "dev": "webpack-dev-server",
    // webpack5では、
    "dev": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

何このエラー？

command

$ npx dev
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"darwin","arch":"x64"})
npm ERR! notsup Valid OS:    linux
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   darwin
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/cygnu/.npm/_logs/2021-03-09T04_20_34_132Z-debug.log
コード[ 'dev@latest' ]で1のインストールに失敗しました

$ npm run (エイリアス) のコマンドを実行となるため scripts のエイリアスで設定している dev は $ npm run dev となる。npxにはこのエイリアスが紐づいていない?ここで、何時間もつまづいていた。早く公式ドキュメント (https://github.com/webpack/webpack-dev-server) を読むべきだった・・・。

参考文献 (参考にした順に記載)

「最新版TypeScript+webpack5の環境構築まとめ (2020/10/11)」(2021/03/09 閲覧)
Qiita (@savacan)「駆け出しエンジニアが０からReact/typescript環境構築してみる。 (2019/06/10 更新分)」(2021/03/09 閲覧)
Qiita (@savacan)「React/TS環境にemotion入れてみる (2020/10/26 更新分)」(2021/03/09 閲覧)
「WebpackでReactを始める (2020/12/16)」(2021/03/09 閲覧)
Qiita (@uryyyyyyy)「React + TypeScript + Webpackの最小構成 (2017/07/28 更新分)」(2021/03/09 閲覧)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up