【webpack】ビルドするとimport宣言したcssファイルが0.jsになってしまう件の解決

webpackの構成を作成していた時の備忘録です。
今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。
また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。

webpack.js.org

状況

webpackのコマンドでビルドすると、0.jsと言うファイルが生成される。

$ webpack
//...
Built at: 08/07/2020 5:00:27 PM
   Asset      Size  Chunks             Chunk Names
    0.js   4.2 KiB       0  [emitted]  
index.js  8.93 KiB   index  [emitted]  index
Entrypoint index = index.js
[0] multi ./src/js/index.js 28 bytes {index} [built]
[./src/js/index.js] 85 bytes {index} [built]
[./src/stylus/index.styl] 316 bytes {0} [built]

ソース

エントリーポイント

エントリーポイント用のスクリプトファイルです。 importでスタイル元のファイルを指定しています。

// src/main.js

import('../stylus/index.styl');

webpack.config.js

webpackの設定ファイルは次の通りです。

// webpack.config.js
const path = require('path');

module.exports = {
    entry: {
        'index': [
            path.resolve(__dirname, 'src/js/index.js')
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.styl(us)?$/,
                loader: [
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    }
};

解決方法

importの宣言は()をつけてはいけませんでした。

developer.mozilla.org

エントリーポイントのimport宣言から、()を外しました。

// src/main.js

// import('../stylus/index.styl');
import '../stylus/index.styl';

この状態でビルドした所、0.jsを出力しなくなりました。

$ webpack
//...
Built at: 08/07/2020 5:07:45 PM
   Asset      Size  Chunks             Chunk Names
index.js  8.61 KiB   index  [emitted]  index
Entrypoint index = index.js
[0] multi ./src/js/index.js 28 bytes {index} [built]
[./src/js/index.js] 84 bytes {index} [built]
[./src/stylus/index.styl] 316 bytes {index} [built]
    + 1 hidden module