scalajs 和 webpack4 配置设置问题

scalajs and webpack4 config settings issues

我正在使用 webpack 4.20.2 和 scalajs ("0.6.24"), scalajs bundler(0.13.1)

当我构建捆绑文件时,我遇到了以下 webpack 异常。我附加了 build.sbt ,它使用 webpack.config.dev.js 并生成 scalajs-webpack.config.js 。如果我直接在 build.sbt 中使用 scalajs-webpack.config.js,我使用 hack 来克服这个异常,那么我不会收到错误并且能够生成单个捆绑文件,但是在使用 webpack-dev-config.js 时如下所示,然后我收到错误。

webpack.config.dev.js

'use strict';

var webpack = require('webpack');
//var _ = require('lodash');
var merge = require("webpack-merge")
//var commonConfig = require("./scalajs.webpack.config")


module.exports = _.merge(
    require('./scalajs.webpack.config'),
    require('./webpack.config.shared'),
    {
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('development')
            })
        ],
    });

生成的 scalajs-webpack.config.js

module.exports = {
  "entry": {
    "scalajs-react-template-opt": ["/home/faltu/Development/ScalaJsWebApp/js/scalajs-react-template-opt.js"]
  },
  "output": {
    "path": "/home/faltu/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main",
    "filename": "[name]-bundle.js"
  },
  "mode": "development",
  "devtool": "source-map",
  "module": {
    "rules": [{
      "test": new RegExp("\.js$"),
      "enforce": "pre",
      "use": ["source-map-loader"]
    }]
  }
}

build.sbt

enablePlugins(ScalaJSPlugin)
enablePlugins(ScalaJSBundlerPlugin)


name := "scalajs-react-template"
version := "1.0"
scalaVersion := "2.12.1"

// create launcher file ( its search for object extends JSApp , make sure there is only one file)
//persistLauncher := true
//persistLauncher in Test := false

val scalaJSReactVersion = "1.0.1"
val scalaCssVersion = "0.5.3-RC1"
val reactJSVersion = "15.5.4"
version in webpack := "4.20.2"
version in startWebpackDevServer := "3.1.4"

resolvers += "Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots"


libraryDependencies ++= Seq(
     "org.scala-js" %%% "scalajs-dom" % "0.9.2",
    "com.olvind" %%% "scalajs-react-components" % "1.0.+",
  "com.lihaoyi" %%% "scalatags" % "0.6.7",
  "io.surfkit" %%% "scalajs-google-maps" % "0.0.3-SNAPSHOT",
"com.github.japgolly.scalajs-react" %%% "core" % scalaJSReactVersion,
  "com.github.japgolly.scalajs-react" %%% "extra" % scalaJSReactVersion,
  "com.github.japgolly.scalacss" %%% "core" % scalaCssVersion,
  "com.github.japgolly.scalacss" %%% "ext-react" % scalaCssVersion,
 "org.webjars.npm" % "loose-envify" % "1.1.0",
  "org.webjars.npm" % "js-tokens" % "4.0.0"

)

// React itself
//   (react-with-addons.js can be react.js, react.min.js, react-with-addons.min.js)
//DOM, which doesn't exist by default in the Rhino runner. To make the DOM available in Rhino
jsDependencies ++= Seq(
  "org.webjars.npm" % "react" % reactJSVersion / "react-with-addons.js" commonJSName "React" minified "react-with-addons.min.js",
  "org.webjars.npm" % "react-dom" % reactJSVersion / "react-dom.js" commonJSName "ReactDOM" minified "react-dom.min.js" dependsOn "react-with-addons.js"
)

lazy val example =
  project
    .in(file("."))
    .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin)
    .settings(settings)
    .settings(
      libraryDependencies ++= Seq(
        "com.github.benhutchison" %%% "prickle" % "1.1.13",
        "com.github.japgolly.scalajs-react" %%% "core"                     % "1.0.1",
        "com.github.japgolly.scalajs-react" %%% "extra"                    % "1.0.1",
        "com.olvind"                        %%% "scalajs-react-components" % "1.0.+"
      )
    )

// *****************************************************************************
// Settings
// *****************************************************************************




lazy val SuiVersion   = "0.68.5"
lazy val EuiVersion   = "0.6.1"
lazy val MuiVersion   = "0.18.1"
lazy val reactVersion = "15.5.4"

lazy val bundlerSettings =
  Seq(
    version in webpack := "4.20.2",
    scalaJSUseMainModuleInitializer := true,
    scalaJSUseMainModuleInitializer.in(Test) := false,
    artifactPath.in(Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value /
      ((moduleName in fastOptJS).value + "-opt.js")),
    webpackResources :=
      webpackResources.value +++
        PathFinder(
          Seq(
            baseDirectory.value / "index.html"
          )) ** "*.*",
    webpackEmitSourceMaps := false,
    webpackConfigFile in (Compile, fastOptJS) := Some(
        baseDirectory.value / "webpack.config.dev.js"),
   // useYarn := true,
    npmDependencies.in(Compile) := Seq(
      "elemental"                         -> EuiVersion,
      "highlight.js"                      -> "9.9.0",
      "material-ui"                       -> MuiVersion,
      "react"                             -> reactVersion,
      "react-dom"                         -> reactVersion,
      "react-addons-create-fragment"      -> reactVersion,
      "react-addons-css-transition-group" -> "15.0.2",
      "react-addons-pure-render-mixin"    -> "15.5.2",
      "react-addons-transition-group"     -> "15.0.0",
      "react-addons-update"               -> "15.5.2",
      "react-geomicons"                   -> "2.1.0",
      "react-infinite"                    -> "0.11.0",
      "react-select"                      -> "1.0.0-rc.5",
      "react-slick"                       -> "0.14.11",
      "react-spinner"                     -> "0.2.7",
      "react-tagsinput"                   -> "3.16.1",
      "react-tap-event-plugin"            -> "2.0.1",
      "semantic-ui-react"                 -> SuiVersion,
      "svg-loader"                        -> "0.0.2",
      "snabbdom"                          -> "0.5.3",
      "font-awesome"                      -> "4.7.0",
      "url-loader"                        -> "0.5.9",
      "firebase"                          ->  "5.4.2",
      "firebase-admin"                    -> "6.0.0",
      "webpack"                            -> "4.18.1",
      "webpack-merge"                      -> "4.1.0",
      "file-loader"                       -> "2.0.0",
      "jquery"                             ->"3.3.1"

    )
  )
scalaJSUseMainModuleInitializer := true
lazy val settings =  bundlerSettings
// creates single js resource file for easy integration in html page
skip in packageJSDependencies := true
//persistLauncher in Test := false
//scalaJSUseMainModuleInitializer in Compile := true
//requiresDOM in Test := true
// copy  javascript files to js folder,that are generated using fastOptJS/fullOptJS

crossTarget in (Compile, fullOptJS) := file("js")
crossTarget in (Compile, fastOptJS) := file("js")
crossTarget in (Compile, packageJSDependencies) := file("js")
crossTarget in (Compile, scalaJSUseMainModuleInitializer) := file("js")
crossTarget in (Compile, packageMinifiedJSDependencies) := file("js")
artifactPath in (Compile, fastOptJS) := ((crossTarget in (Compile, fastOptJS)).value /
  ((moduleName in fastOptJS).value + "-opt.js"))
scalacOptions += "-feature"


import com.lihaoyi.workbench.Plugin._

workbenchSettings
updateBrowsers :=  updateBrowsers.triggeredBy(fastOptJS in Compile)
refreshBrowsers:=  refreshBrowsers.triggeredBy(fastOptJS in Compile)
bootSnippet := "scalajsreact.template.ReactApp().main();"

错误

    ast optimizing js/scalajs-react-template-opt.js
[error] npm notice created a lockfile as package-lock.json. You should commit this file.
[error] npm WARN The package webpack is included as both a dev and production dependency.
[error] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
[error] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
[error] 
[error] added 16 packages from 6 contributors, removed 24 packages, updated 4 packages and audited 20209 packages in 12.501s
[error] found 1 moderate severity vulnerability
[error]   run `npm audit fix` to fix them, or `npm audit` for details
[info] Writing scalajs.webpack.config.js
[info] Bundling the application with its NPM dependencies
[error] /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:149
[error]                 throw new Error(
[error]                 ^
[error] 
[error] Error: Rule can only have one result source (provided use and loaders) in {
[error]   "test": {},
[error]   "enforce": "pre",
[error]   "use": [
[error]     "source-map-loader"
[error]   ],
[error]   "loader": [
[error]     "style-loader",
[error]     "css-loader"
[error]   ]
[error] }
[error]     at checkUseSource (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:149:11)
[error]     at Function.normalizeRule (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:287:4)
[error]     at rules.map (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:110:20)
[error]     at Array.map (<anonymous>)
[error]     at Function.normalizeRules (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:109:17)
[error]     at new RuleSet (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/RuleSet.js:104:24)
[error]     at new NormalModuleFactory (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
[error]     at Compiler.createNormalModuleFactory (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:509:31)
[error]     at Compiler.newCompilationParams (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:526:30)
[error]     at Compiler.compile (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:534:23)
[error]     at readRecords.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:274:11)
[error]     at Compiler.readRecords (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:402:11)
[error]     at hooks.run.callAsync.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:271:10)
[error]     at _err0 (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
[error]     at compiler.hooks.run.tapAsync (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/CachePlugin.js:52:13)
[error]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
[error]     at AsyncSeriesHook.lazyCompileHook (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/Hook.js:154:20)
[error]     at hooks.beforeRun.callAsync.err (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:268:19)
[error]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
[error]     at AsyncSeriesHook.lazyCompileHook (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/tapable/lib/Hook.js:154:20)
[error]     at Compiler.run (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/lib/Compiler.js:265:24)
[error]     at processOptions (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:497:20)
[error]     at yargs.parse (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:500:3)
[error]     at Object.parse (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)
[error]     at /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:212:8
[error]     at Object.<anonymous> (/home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack-cli/bin/webpack.js:502:3)
[error]     at Module._compile (internal/modules/cjs/loader.js:689:30)
[error]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
[error]     at Module.load (internal/modules/cjs/loader.js:599:32)
[error]     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
[error] Failure on parsing the output of webpack: No content to map due to end-of-input
[error]  at [Source: java.lang.UNIXProcess$ProcessPipeInputStream@12b84ce3; line: 1, column: 0]
[error] You can try to manually execute the command
[error] node /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/node_modules/webpack/bin/webpack --bail --profile --json --config /home/ashutosh/Development/ScalaJsWebApp/target/scala-2.12/scalajs-bundler/main/webpack.config.dev.js
java.lang.RuntimeException: Non-zero exit code: 1

webpack.config.shared.js

'use strict';

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 20000
                }
            }]
    }
};

此错误来自 webpack,您在共享配置中将来自 webpack(1 和 2)的加载器语法与来自 scalajs-bundler 生成的 webpack 3 的加载器语法混合在一起。

https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules

您可以升级共享配置:webpack.config.shared.js

'use strict';

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  { loader: 'style-loader' }, 
                  { loader: 'css-loader' }
                ]
            }, {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use: [
                  { loader: 'url-loader' }
                ],
                options: {
                    limit: 20000
                }
            }]
    }
};