webpack5とwebpack.config.jsの設定

webpackの設定については、下記リンク先を参照。

https://ajike.github.io/webpack_scss/

http://toushin.konjiki.jp/ というサイトを、Webpack5を使いリニューアルしてみた。package.jsonとwebpack.configの設定でいろいろ考えた結果、下記のようになった。

npmでbootstrap、jqueryは最新版を入れる。bootstrapは4.5.3、jqueryは3.5.1を入れたはずなのに、ChromeのWappalyzerではbootstarpは4.1.3、jqueryは3.3.1と表示される。分からん。

{
  "name": "new11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^5.0.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

cssはscssで作る。cssファイルは出力せず、jsとバンドルする設定。

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js",
  },

  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  
  devServer: {
    contentBase: "dist",
    open: true
  },
  

  module: {
    rules: [
      {
        // Sassファイルの読み込みとコンパイル 
        test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子 
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          // CSSをバンドルするための機能
          {
            loader: "css-loader",
            options: {
              // オプションでCSS内のurl()メソッドの取り込まない
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2,
            },
          },
          // PostCSSのための設定
          {
            loader: "postcss-loader",
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
              postcssOptions: {
                // ベンダープレフィックスを自動付与する
                plugins: ["autoprefixer"],
              },
            },
          },
          // Sassをバンドルするための機能
          {
            loader: "sass-loader",
            options: {
              // ソースマップの利用有無
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};