Webpack ENVs

Webpack環境の作成

環境：WSL

nvm -v
> 0.39.7
node -v
> v20.16.0

pakege.json作成 ～ 開発サーバーまで

npm init -y
npm i -D webpack webpack-dev-server webpack-cli @webpack-cli/generators
npm install --save-dev css-loader

npm audit fix
npm audit
echo "==========================" && sleep 2
npm fund

npx webpack init # webpack.config.js作成
npx webpack serve # open localhost:devserver.

Documentation

• webpack-cli's init command
• Use a different configuration file

webpack --config prod.config.js

• plugins

• 気になるAwesome-Webpack/#Loaders

• Webpack Dashboard

• etc... Awesome-Webpack Loaders

Error log

• --template=default でエラー on WSL
  • nvmを使用することにしたら解決しました。

ハマったポイント

webpack5

• 開発サーバーが立ち上がらない: webpack-dev-serverをインストールする必要がある。
  • エラーメッセージ：[webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package.
• HotReloadされない: DevServer
  • webpack.config.js の config.entryのファイルをwatch しているが バンドルされない他ファイルを編集していた。。

Points

webpack.config.js

const path = require("path");

Nodejs.API: path: https://nodejs.org/api/path.html

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

https://webpack.js.org/plugins/html-webpack-plugin/

// ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css.  Use this below instead.
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
// config.plugin.push( new MiniCssExtractPlugin() );

https://webpack.js.org/plugins/mini-css-extract-plugin/

const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
// config.plugin.push( new WorkboxWebpackPlugin.GenerateSW() );

workbox-webpack-plugin | google🔍
https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin?hl=ja

Bundle画像サイズの制限

  module: {
    rules: [
      {
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          }
        }}]}

https://webpack.js.org/configuration/module/#ruleparserdataurlcondition

Babel

JavaScript compiler.

• Babel設定について.md
• React設定について.md

ESLint

構文チェック

• ESLint設定について.md

todo read:books:

• css-loader
• style-loader
• create-react-appのwebpack.config.js