darake Update: 2022-02-01

Webpack Encoreの使い方を分かりやすく解説する

JavaScript

本記事では、Webpack Encoreについて初心者にも分かりやすく解説していく。

対象読者としては、以下のレベル感の人を想定している。

Webpackの基本的な概念、使い方は理解している

Webpack Encoreとは

Webpack Encoreとは、Symfonyによって作られたWebpackのラッパーツールである。

Webpackは便利だが、少しだけJavaScriptやCSSをビルドする際にも webpack.config.jsに多くの設定を書かなければならない嫌いがある。

Webpack Encoreを使う事でwebpack.config.jsの記述を簡潔にし、開発に専念することができる。

下記のwebpack.config.jsはWebpack Encoreで記述したもの。 Webpackの設定を簡単に書けることが分かる。

var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
    .setOutputPath('source/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    .copyFiles({
        from: './source/assets/icons'
    })
    .addEntry('app', './source/assets/js/app.js')

    .disableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

Webpack Encoreのセットアップ

以下は、Webpack Encoreの使い方について解説していく。

最初にWebpack Encoreをインストールする。

npm install @symfony/webpack-encore --save-dev

Webpack Encoreをインストールすると、他にもフロントエンドの開発でよく使うライブラリも一緒にインストールしてくれる。

style-loader
css-loader
@babel/core

ただし、SassやTypeScript等に関するライブラリについては、別途入れる必要がある。

npm install sass-loader node-sass --save-dev

Webpack Encoreの基礎的な使い方

Webpack Encoreを使うためには、webpack.config.js内で@symfony/webpack-encoreをrequireする。

var Encore = require('@symfony/webpack-encore');

Encore
    // コンパイルしたファイルを格納するディレクトリ
    .setOutputPath('output_dev')
    // Webサーバーにデプロイする際にrootディレクトリとなる場所を指定
    .setPublicPath('/output_dev')
    // add entry
    .addEntry('assets/app', './assets/js/app.js')
    ;

module.exports = Encore.getWebpackConfig()

Webpack Encoreで記述するファイルやディレクトリは、 webpack.config.jsがあるディレクトリの相対パスを指定すること。

例えば、home/tarou/webpack.config.jsにconfigファイルがある場合は、 setOutputPath('output_dev')は、setOutputPath("home/tarou/output_dev")と解釈してくれる。

addEntryは第1引数にビルド後のファイル、第2引数にビルドをするJavaScriptファイルを書く。

上記の例で説明すると、./assets/js/app.jsの処理の中でCSSをimportしておくと、最終的には以下のファイルを出力してくれる。

output_dev/assets/app.js
output_dev/assets/app.css

最後の行にあるEncore.getWebpackConfig()は、通常のwebpack.config.jsを出力してくれる。なので、以下の様に書くことで最終的に出力されるwebpack.config.jsの確認ができる。

console.log(Encore.getWebpackConfig())

Webpack Encoreで使える便利なメソッド

以下は、Webpack Encoreで使えるメソッドを紹介していく。

copyFiles

copyFilesを使う事で、画像やフォント等の静的ファイルを指定のディレクトリにコピーする事ができる。

Encore
    // copyFiles
    .copyFiles([
        {
            from: "./assets/images",
            to: "assets/images/[path][name].[ext]"
        },
        {
            from: "./uploads",
            to: "uploads/[path][name].[ext]"
        }
    ])

配列として複数指定ができ、ファイルの名前解決も自動で行ってくれる。

copyFiles内で使える変数は以下の通り。

path .. from配下の相対ディレクトリ
name .. ファイル名
ext .. 拡張子

enableSourceMaps

source mapを出力してくれる。引数に真偽値をいれることができるので、以下の様に使う事が多い。

Encore
    .enableSourceMaps(!Encore.isProduction())

上記の例だと、production環境の場合はsource mapを出力しないが、 development環境の場合は出力するようになる。

enableSassLoader

sass-loaderの設定を自動でやってくれる。sass-loaderのオプションを設定したい場合は、以下の様に書くと良い。

Encore
    .enableLessLoader(function(options) {
        options.relativeUrls = false;
    })

addRule

ruleの追加ができる。例えば、style-loaderの様に他のloaderに依存するloaderを使いたい場合には、以下の様に書く。

Encore
    .addRule({
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                "style-loader",
                // Translates CSS into CommonJS
                "css-loader",
                // Compiles Sass to CSS
                "sass-loader",
            ],
        })

autoProvidejQuery

jQueryを使いたい場合は、autoProvidejQuery()が便利。

jQueryをビルドするだけでなく、jQueryや$の名前解決までやってくれる。

Encore
    .autoProvidejQuery()