[FE] webpack + scala.js

├── build.sbt
├── index.html
├── node_modules
│   └── scalajs-loader
│       ├── LICENSE
│       ├── README.md
│       ├── index.js
│       └── package.json
├── package.json
├── project
│   ├── build.properties
│   └── plugins.sbt
├── src
│   └── main
│       └── scala
│           └── test
│               └── App.scala
└── webpack.config.js

1.環境構成
1.1 sbtのインストール

brew install sbt

1.2グローバルインストールwebpack

npm i -g webpack

1.3プロジェクトディレクトリを新規作成し、npmを使用して初期化

mkdir test-scalajs \
&& cd test-scalajs \
&& npm init -f

1.4. scalaを構成する.js
(1)./build.sbt

enablePlugins(ScalaJSPlugin)

name := "test-scalajs"

scalaVersion := "2.12.2" // or any other Scala version >= 2.10.2

// This is an application with a main method
scalaJSUseMainModuleInitializer := true

注:./build.sbtのnameは重要で、コンパイル後のファイル名、test-scalajs-fastopを決定します.jsは、./target/scala-2.12/test-scalajs-fastopt.jsに位置する.プロジェクトのファイル名と一致する必要があります.scalajs-loaderはコンパイルされたjsファイルを見つけることができます.
(2)./project/plugins.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.19")

(3)./project/build.properties

sbt.version=0.13.15

1.5. Webpackの構成./webpack.config.jsを新規作成し、次のように書き込みます.

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, ''),
    entry: [
        path.resolve(__dirname, 'src/main/scala/test/App.scala')
    ],
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.scala$/,
                loader: 'scalajs-loader'
            }
        ]
    }
};

注意:ここでは、entryを構成してから、エントリファイル、src/main/scala/test/App.scalaを追加します.
1.6 scalajs-loaderのインストール

npm i --save-dev scalajs-loader

2.機能コードの追加
2.1新規./src/main/scala/test/App.scala

package test

object App {
  def main(args: Array[String]): Unit = {
    println("Hello world!")
  }
}

2.2新規作成./index.html

3.コンパイルと
3.1 webpackを してコンパイルおよびパッケージング

webpack --watch

3.2ブラウザが く./index.html
コンソールを く

Hello world!

4. DOM
4.1 ./build.sbt ./build.sbt に し、

libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.1"

4.2 ./src/main/scala/test/App.scala

package test

import org.scalajs.dom
import dom.document

object App {
  def appendPar(targetNode: dom.Node, text: String): Unit = {
    val parNode = document.createElement("p")
    val textNode = document.createTextNode(text)
    parNode.appendChild(textNode)
    targetNode.appendChild(parNode)
  }
  
  def main(args: Array[String]): Unit = {
    appendPar(document.body, "Hello World")
  }
}

4.2 コンパイル
をオンにします./index.html、ページ Hello World.
リファレンス
Basic tutorial Hands-on Scala.js Installing sbt on Mac