webpack

Webパッケージは、1つの開始点(Entry point)からすべての依存モジュールを見つけ、ファイルとして使用します.この結果をOutputと呼ぶ.

スタート

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

Webpack:Webpackを実行するために必要なインストール
Webpack-cli:ex)npm run devをインストールして端末環境でコマンドを実行
Webpack-dev-sever:エンコード中の置換内容をすぐにリフレッシュするためにインストール
html-webpack-plugin:webpack(Webパッケージ)でHTMLを処理するためのプラグイン.
babel-loader:Webパッケージでbabelを処理するライブラリ.
@babel/core:babel(バーベル).
@babel/prefet-env:babel(バーベル)コンパイル時にどのターゲットに指定するライブラリを設定します.
@babel/prefert-react:reactをbabelにコンパイルするライブラリ.
rimarf:Macとwindowsで同じコマンドでフォルダを削除するためのライブラリです.

package.json

"scripts":{
	"dev":"webpack-dev-sever --mode development",
    "build":"webpack --mode production"
}

「dev」:「webpack-dev-sever--モード開発」:npmでdevを実行するときにリアルタイムサーバを実行する
「build」:「webpack--mode production」:npmでbuildを実行するときにすべての材料をバンドルパッケージとして作成

webpack.config.js

const path = require('path');

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

module.exports = {
  entry: {
    'js/app': ['./src/App.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};