環境
- 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 閲覧)