webpack5の基本設定とsemantic-ui 備忘録

前提条件

• node.js v16.14.2インストール済

今回、目指す条件

Webpack全般

• Babelで新しいJSを古いブラウザでも動くようにする
• CSSや画像ファイルはJSに組み込まず、別ファイルとして書き出す
• jQueryも入れる(Semantic UIに必要なので)
• 共通関数や、モジュールは1つのJSにまとめる

Semantic-ui

• npmでfomantic-ui*をインストールし、gulpでビルドする
  *Semantic UI は開発が停滞しつつあるという問題があり、Semantic UIからフォークしたコミュニティ版
• Semantic-uiのcssに含まれるフォントファイルも、別フォルダに書き出す

JS

• ページ別に処理を分け、JSを別々に書き出す
• 自作のモジュールjsや、semantic-uiのjsは、1つのjsにまとめる(vendor.js)

CSS

• 自作cssはsassを使用し、semantic-uiのcssも、同じ1つのcssファイルにまとめる。(style.css)

インストール

webpackの必要なパッケージをひたすらインストールしていきます。
何も考えず、以下を順に進めましょう
*備忘録なので、細かい説明は今回は書きません

まずはプロジェクトのディレクトリを作成し、そこへ移動

cd \app_name

Webpackの初期化

npm init -y

jQueryのインストール

npm i jquery

Semantic-ui(fomantic-ui)のインストール

fomantic-uiは2.9.0以下ではエラーとなり、ベータ版で動作しました

npm i fomantic-ui@nightly

その他、パッケージのインストール

npm i -D webpack webpack-cli core-js regenerator-runtime sass sass-loader css-loader postcss-loader expose-loader @babel/core @babel/preset-env babel-loader autoprefixer mini-css-extract-plugin

package.json

package.jsonのscriptsを以下のように変更します。不要なものを削除して、こんな感じになっているはずです

{
  "name": "app_name",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode development",
    "prod": "webpack --mode production",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.4",
    "core-js": "^3.21.1",
    "css-loader": "^6.7.1",
    "expose-loader": "^3.1.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss-loader": "^6.2.1",
    "regenerator-runtime": "^0.13.9",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "fomantic-ui": "^2.9.0-beta.270",
    "jquery": "^3.6.0",
  }
}

webpack.config.js

「webpack.config.js」を作成

プロジェクトフォルダ直下に、「webpack.config.js」を作成し以下のように記載

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const outputFile = "[name]"
const assetFile = "[name]"
module.exports = ({ outputFile, assetFile }) => ({
    mode: "development",//production 
    target: ['web', 'es5'], //IE対応
    context: `${__dirname}/src`,
    devtool: 'source-map',
    entry: {
        index: path.join(__dirname, '/src/js', 'index.js'),
        page: path.join(__dirname, '/src/js', 'page.js'),
		//必要なページ分のjsを記載
    },
    output: {
        clean: true, 
        path: path.join(__dirname, '/dist/js'),
        filename: '[name].bundle.js',
        assetModuleFilename: './../assets/[name][ext][query]'//fontファイルなどは分ける
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './../style.css',
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.$': 'jquery',
        })
    ],
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: 'initial',
        }
    }
});

この時点のファイル構成

srcディレクトリを作成し、その中にjsディレクトリ、scssディレクトリを作成。
その中にjsやscssを作成します(この辺はとりあえず適当に)。
postcss.config.jsと、babel.config.jsは後で記載

fomantic-uiのcssをsrcに持ってくる

この辺、やり方が正しいのかわかりませんが、 node_modulesディレクトリの中のfomantic-ui/dist/の中から、 themeフォルダとsemantic.min.cssをsrc/cssの中にコピーしてきます。

+ dist/　←これは後で生成される
+ node_modules/
+ src/
    + js/
	  - index.js
	  - page.js　←とりあえず空で
	  + modules/
	    - module_name.js　←とりあえず空で
	+ scss/
	  - app.scss
　　+ css/　←この中にsemanticのcssをコピー
      + themes
      - semantic.min.css
- babel.config.js
- package.json
- package-lock.json
- postcss.config.js
- webpack.config.js

src/index.js

"use strict";

import 'fomantic-ui'
import './../css/semantic.min.css'
import module from './modules/module_name.js';
import './../scss/app.scss'

その他、設定ファイル

babel.config.js

module.exports = api => {
    // キャッシュを追加する事でビルドの時間を短縮できる。
    api.cache(true)
    return {
        "presets": [
            ["@babel/preset-env", {
                // ブラウザのバージョンが将来的に上がっていっても対応できるように下記の設定方法にする。
                // browserlist が定期的に更新されるため捕手が容易になる。
                targets: [
                    "last 1 version",
                    // シェアが1%以上あるブラウザのバージョン
                    "> 1%",
                    "maintained node versions",
                    "not dead"
                ],
                // ビルドする際に core-jsで変換に使った関数だけ取り込むようにしてくれるため
                // パフォーマンスが上がる。
                // これを使用するとcore-js, regenerator-runtimeをimportしなくてよくなる。
                useBuiltIns: "usage",
                corejs: 3
            }]
        ]
    }
}

postcss.config.js

// 古いブラウザにも対応出来るようにベンダープレフィックスを付ける。
module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

ビルド

npm run build

ビルドするとdist/フォルダが生成され、 以下のような構成となるはず

+ dist/
  + assets/
    //semantic-uiに含まれるフォントファイル
  + js/
    - index.bundle.js
	- page.bundle.js
	- vendor.bundle.js
  - style.css

このファイルを元に、wordpressなどで読み込み、利用する想定です。