ScalaJS 和 Webpack4 配置设置问题



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

当我构建捆绑文件时,我得到以下 webpack 异常。我正在附加使用 webpack.config.dev 的 build.sbt.js 并生成 scalajs-webpack.config.js 。如果我直接使用 scalajs-webpack.config.js 在 build.sbt 中,我使用 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
}
}]
}
};

最新更新