Webpack のentryの正しい書き方と出力

目次

js.jsなんて変な名前のファイルが生成されるので首を傾げていたが、entryの書き方が悪かったのだと気がついた。

entryの値は、オブジェクト（連想配列的に）で書くこともできるし、配列で書くこともできる。オブジェクトで書いた時は[name]はオブジェクトで指定したプロパティ名が採用される。

環境

• webpack4

手順など

 module.exports = {
        mode: MODE,
        entry: {
        js: './js/entry.js',
        styles: './scss/style.scss'
      },
        output: {
            filename: './js/[name].js',
            path: path.resolve(__dirname,'dist')
        },
      //（中略）
    }

このようにオブジェクトでentryを指定すると、プロパティ名をとって、'js.js'とか'styles.js'が出力される。

 module.exports = {
        mode: MODE,
        entry: ['./js/entry.js', './scss/style.scss'],
        output: {
            filename: './js/[name].js',
            path: path.resolve(__dirname,'dist')
        },
      //（中略）
    }

このように配列を指定すると、main.js（デフォルトの名前）とstyle.cssが出力される。