webpack4で複数のエントリポイントに応じたjs,cssファイルを出力する

複数のエントリポイントから一回のビルドコマンドで別々のjs, scss等のバンドルファイルを出力したい。

root
│  package.json
│  package-lock.json
│  webpack.config.js
│
├─assets
│  │  
│  ├─dist
│  │  ├─ js   
│  │  │  ├─A.js    
│  │  │  └─B.js
│  │  └─ css    
│  │     ├─A.css 
│  │     └─B.css
│  │
│  ├─js
│  │  ├─A.js 
│  │  ├─B.js
│  │  └─modules
│  └─sass
│     ├─A.scss 
│     ├─B.scss
│     └─modules
│        
└─node_modules

modules以下を使用して構成される[name].js及び、[name].scssから、
distのjs,css配下に[name].js及び[name].cssをbundleとしてそれぞれ生成するイメージです。

ページ単位でレイアウトとフロントに持たせる機能が全く異なるアプリケーションを作っていて、適用させる静的ファイルを完全に分けたいケースに直面したのでメモ。

bundleをcssファイルとして出力したい場合、webpack4より前ではextract-text-webpack-pluginを使用して実現することができましたが、4からはcssでの利用は非推奨になっております。

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.
[https://github.com/webpack-contrib/extract-text-webpack-plugin#usage]

そのため、mini-css-extract-pluginを使用します。

webpack.config.js

const path = require("path");
const MiniCssExtract = require("mini-css-extract-plugin");
const assets = path.join(__dirname, "./root/assets/");
const dist = assets + "dist/";
const froms = {
  js: {
    A: assets + "js/A.js",
    B: assets + "js/B.js"
  },
  scss: {
    A: assets + "sass/A.scss",
    B: assets + "sass/B.scss"
  }
};

module.exports = {
  mode: "development",
  entry: {
    A: froms.js.A,
    B: froms.js.B,
    "A.css": froms.scss.A,
    "B.css": froms.scss.B
  },
  output: {
    filename: "js/[name].js",
    path: dist
  },
  module: {
    rules: [
      {
        test: /\.scss/,
        use: [
          MiniCssExtract.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtract({
      filename: "css/[name]"
    })
  ],
};

ただしこれだと、dist/jsの配下にA.css.js, B.css.jsという余計なファイルまで出力されてしまって煩わしいです。

webpack-fix-style-only-entriesを使用する

webpack-fix-style-only-entriesというライブラリを使用します。
npmインストールしてライブラリの読み込み

webpack.config.js

const FixStyleOnlyEntries = require("webpack-fix-style-only-entries");

pluginsに追記

webpack.config.js

plugins: [
    new FixStyleOnlyEntries(),
    new MiniCssExtract({
      filename: "css/[name]"
    })
  ],

ビルド

package.json

"scripts": {
  "build": "webpack"
}

$ npm run build

これで余計なjsのbundleファイルが生成されずに済みます。