個人的wordpress開発メモ:環境構築

個人的メモのためおかしいところがあるかもしれません。

  • ローカル環境…Local by flywheel
  • sass対応、ベンダープレフィックス、ローカル自動更新…webpack

テーマフォルダで初期化

yarn init -y
//package.json生成

webpackインストール

yarn add webpack webpack-cli --dev

主要パッケージのインストール

 yarn add --dev css-loader autoprefixer postcss postcss-loader mini-css-extract-plugin css-declaration-sorter postcss-sort-media-queries sass sass-loader style-loader
 //cssまわり

 yarn add --dev browser-sync browser-sync-webpack-plugin webpack-dev-server
 //自動更新まわり

 yarn add --dev stylelint-webpack-plugin stylelint
 //stylelint

./src/index.js

import './style.scss'

scssを読み込むだけのエントリーポイント

webpack.config.jsを作成

const StylelintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const path = require('path');

module.exports = {
  mode:'development',
  entry:'./src/index.js',
  //ソース元のjs
  output: {
    path: path.resolve(__dirname)
  },
  //出力先のフォルダ
  module: {
    rules: [
       {
        test:/\.(scss|sass|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
            //cssファイルを出力できるやつ
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
            }
            //cssをjsに読み込ませられるやつ
          },       
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                 ['autoprefixer',
                    {
                      grid:"autoplace"
                        // gridありでベンダープレフィックス付与
                    },
                  ],
                 ['css-declaration-sorter', { order: 'alphabetical' }],
                 ['postcss-sort-media-queries', { sort: 'mobile-firstl' }],
                ],
                //cssをアルファベット順・メディアクエリの並び替え
              },
            },
          },   
          {
            loader: 'sass-loader',
            //sass読み込み
          },
        ]
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin({
    filename:'style.css'
    //出力するcssのファイル名
  }),
  new BrowserSyncPlugin({
      host: "localhost",
      port: 10005,
      proxy: "http://localhost:10004"
      //LocalのDATABASEタブで確認して合わせる
    }),
  new StylelintPlugin(),
  ],
  
  // node_modules を監視(watch)対象から除外
  watchOptions: {
    ignored: /node_modules/  //正規表現で指定
  },
}

package.json

"devDependencies": {
    "autoprefixer": "^10.2.5",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "css-declaration-sorter": "^6.0.3",
    "css-loader": "^5.2.4",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.15",
    "postcss-loader": "^5.3.0",
    "postcss-sort-media-queries": "^3.9.10",
    "sass": "^1.32.13",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "stylelint": "^13.13.1",
    "stylelint-webpack-plugin": "^2.1.1",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  },

"browserslist": [
    "last 2 version",
    "ie >= 11",
    "Android >=4"
  ],
//Autoprefixerの対応ブラウザ

"scripts": {
    "dev": "webpack --watch"
  }

あたり追加しといてwatch(更新したらビルド)しとく

.stylelintrc

{
  "rules": {
    "no-extra-semicolons": true,
    "color-hex-length": "short",
  }
}

main.jsが生成されるが気にしない git使うなら適宜node_modulesフォルダや設定ファイルをgitignoreしておく