У меня большой Backbone. JS кодовая база, которую мы собираемся построить с помощью webpack, чтобы мы могли перейти на традиционное приложение React / Redux. Мы стараемся внести очень небольшие изменения в исходный код. Мы хотим, чтобы Webpack разрешил как можно больше, прежде чем нам придется проводить рефакторинг.
Однако у меня возникает ошибка разрешения локального URL в моем CSS.
Я пробовал resolve-URL-loader но это становилось все более сложным, поскольку требовалось сообщение CSS, которое сопровождалось собственными проблемами, не понимающими некоторых из наших соглашений о МЕНЬШЕМ коде.
Ошибка:
~/Code/main/base/project/frontend on webpack! ⌚ 14:58:22
$ ./node_modules/.bin/webpack --config webpack.config.js
Hash: adfc7f2dc8f413ebcf17
Version: webpack 4.44.1
Time: 8386ms
Built at: 08/03/2020 2:58:33 PM
71 assets
Entrypoint frontend = frontend.js
[0] ./client/cygnus.js 8.14 KiB {0} [built]
[4] ./client/os/collections/risk-profiles.js 350 bytes {1} [built]
[5] ./client/os/collections/lanes.js 2.77 KiB {1} [built]
[6] ./client/os/lib/app-time.js 1.73 KiB {4} [built]
[7] ./client/os/collections/assets.js 1.74 KiB {1} [built]
[8] ./client/os/collections/groups.js 1.83 KiB {1} [built]
[9] ./client/os/views/spinner.js 2.05 KiB {1} [built]
[10] ./client/boot.js 445 bytes {4} [built]
[11] ./client/os/router.js 18.3 KiB {1} [built]
[12] ./client/os/models/map.js 708 bytes {1} [built]
[13] ./client/os/views/map.js 15.4 KiB {1} [built]
[14] ./client/os/views/header.js 7.06 KiB {1} [built]
[15] ./client/os/views/dock.js 11.7 KiB {1} [built]
[16] ./client/os/views/notification.js 2.15 KiB {1} [built]
[17] ./client/os/lib/set-active.js 1.43 KiB {1} [built]
+ 613 hidden modules
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./client/styles/cygnus.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
at /Users/stcalica/Code/main/base/project/frontend/node_modules/webpack/lib/Compilation.js:925:10
at /Users/stcalica/Code/main/base/project/frontend/node_modules/webpack/lib/NormalModuleFactory.js:401:22
at /Users/stcalica/Code/main/base/project/frontend/node_modules/webpack/lib/NormalModuleFactory.js:130:21
at /Users/stcalica/Code/main/base/project/frontend/node_modules/webpack/lib/NormalModuleFactory.js:224:22
at /Users/stcalica/Code/main/base/project/frontend/node_modules/neo-async/async.js:2830:7
at /Users/stcalica/Code/main/base/project/frontend/node_modules/neo-async/async.js:6877:13
at /Users/stcalica/Code/main/base/project/frontend/node_modules/webpack/lib/NormalModuleFactory.js:214:25
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:213:14
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/Users/stcalica/Code/main/base/project/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
at /Users/stcalica/Code/main/base/project/frontend/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (internal/process/task_queues.js:79:11)
@ ./client/cygnus.js 2:2-249:4
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/less-loader/dist/cjs.js!client/styles/cygnus.less:
Entrypoint mini-css-extract-plugin = *
[2] ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less 388 KiB {0} [built]
[3] ./node_modules/css-loader/dist/cjs.js!./client/vendor/jquery-ui/jquery-ui.min.css 22.8 KiB {0} [built]
[24] ./client/styles/fonts/league_gothic/leaguegothic-regular-webfont.woff 69 bytes {0} [built]
[25] ./client/styles/fonts/league_gothic/leaguegothic-regular-webfont.ttf 68 bytes {0} [built]
[26] ./client/styles/fonts/league_gothic/leaguegothic-italic-webfont.woff 69 bytes {0} [built]
[27] ./client/styles/fonts/league_gothic/leaguegothic-italic-webfont.ttf 68 bytes {0} [built]
[28] ./client/styles/fonts/source_sans/sourcesanspro-regular-webfont.woff 69 bytes {0} [built]
[29] ./client/styles/fonts/source_sans/sourcesanspro-regular-webfont.ttf 68 bytes {0} [built]
[30] ./client/styles/fonts/source_sans/sourcesanspro-light-webfont.woff 69 bytes {0} [built]
[31] ./client/styles/fonts/source_sans/sourcesanspro-light-webfont.ttf 68 bytes {0} [built]
[32] ./client/styles/fonts/source_sans/sourcesanspro-extralight-webfont.woff 69 bytes {0} [built]
[33] ./client/styles/fonts/source_sans/sourcesanspro-extralight-webfont.ttf 68 bytes {0} [built]
[34] ./client/styles/fonts/source_sans/sourcesanspro-bold-webfont.woff 69 bytes {0} [built]
[35] ./client/styles/fonts/source_sans/sourcesanspro-bold-webfont.ttf 68 bytes {0} [built]
[36] ./client/styles/fonts/cygnus-icons.eot?4mh43w 68 bytes {0} [built]
+ 55 hidden modules
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 14:36-88
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 18:37-89
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.ttf' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 17:37-89
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 16:37-90
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 15:37-91
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../vendor/pulse/img/select2-spinner.gif' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 20:37-87
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve '../vendor/pulse/img/select2.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 19:37-79
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/layers-2x.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 6:36-69
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/layers.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 5:36-66
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/marker-icon.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 7:36-71
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/spritesheet-2x.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 10:36-74
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/spritesheet.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 8:36-71
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './images/spritesheet.svg' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 9:36-71
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './select2-spinner.gif' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 12:36-68
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './select2.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 11:36-60
ERROR in ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less)
Module not found: Error: Can't resolve './select2x2.png' in '/Users/stcalica/Code/main/base/project/frontend/client/styles'
@ ./client/styles/cygnus.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./client/styles/cygnus.less) 13:36-62
Webpack.config. js
const path = require('path');
const frontend = path.resolve(__dirname, "client/os");
const vendor = path.resolve(__dirname, "client/vendor");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
devtool: 'inline-source-map',
module: {
rules: [
{ test: /\.hbs$/, loader: "handlebars-loader" },
{
test: /\.(css|less)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: url => '/static/styles/' + url
}
},
'css-loader',
'less-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'dist/sunrise/static/fonts/',
publicPath: url => '/static/fonts/' + url
}
}
]
},
{
test: /\.(svg|jpg|gif|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'dist/sunrise/static/img/',
publicPath: url => '/static/img/' + url
}
}
]
},
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
},
{
test: require.resolve('backgrid'),
use: [
{
loader: 'expose-loader',
options: 'Backgrid'
}
]
}
]
},
entry: {
frontend: "./client/cygnus.js"
},
output: {
path: path.resolve(__dirname, "dist/sunrise/"),
filename: "[name].js",
publicPath: "/static/sunrise/"
},
resolve: {
alias: {
'os': frontend,
'styles': path.resolve(__dirname, "client/styles"),
'boot': path.resolve(__dirname, "client/boot"),
'templates': path.resolve(frontend, 'templates'),
'backgrid-itemdata-cell': path.resolve(frontend, 'lib/backgrid-itemdata-cell'),
'backgrid-pulse': path.resolve(vendor, 'pulse/backgrid'),
'd3tip': path.resolve(vendor, 'pulse/d3tip'),
'd3.radial': path.resolve(frontend, 'lib/d3.radial'),
'jquery-ui': path.resolve(vendor, 'jquery-ui/jquery-ui'),
'jquery-range-slider': path.resolve(vendor, 'jquery-ui/jq-range-slider'),
'leaflet-antimeridian': path.resolve(vendor, 'leaflet/leaflet.antimeridian-src'),
'leaflet-cluster': path.resolve(vendor, 'leaflet/leaflet.markercluster'),
'leaflet-imgtransform': path.resolve(vendor, 'leaflet/L.ImageTransform'),
'leaflet-pulse': path.resolve(vendor, 'leaflet/L.Icon.Pulse'),
'push': path.resolve(frontend, 'lib/push'),
'slimscroll': 'jquery-slimscroll',
'spinjs': 'spin.js',
'typeahead': path.resolve(vendor, "pulse/typeahead"),
'pubsub': 'pubsub-js',
'momenttz': 'moment-timezone',
'transit': 'jquery.transit',
'leaflet-encoded': 'polyline-encoded',
'leaflet-geometry': 'leaflet-geometryutil',
'leaflet-terminator': '@joergdietrich/leaflet.terminator',
'jquery-file-upload': 'blueimp-file-upload/js/jquery.fileupload',
'jquery.ui.widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget',
'datetimepicker': 'eonasdan-bootstrap-datetimepicker',
'daterangepicker': 'bootstrap-daterangepicker',
'jquery-hammer': 'jquery-hammerjs',
'bootstrap-treeview': 'patternfly-bootstrap-treeview',
'backgrid-moment': 'backgrid-moment-cell',
'crossfilter': 'crossfilter2',
'$': path.resolve(vendor, 'pulse/jquery'),
}
}
};