Я мигрировал из веб-пакета 1.x в 4.30.версия узла: 10.15.3 версия машинописи: 3.4.5 версия npm: 6.9.0
Эта установка работает на 3 компьютерах (с Windows), но не на одной конкретной машине, хотя все они используют одинаковые версии узла,webpack, npm, другие пакеты npm.
На не работающей машине это выглядит так, как будто Webpack не использует less-loader и ts-loader, определенные в webpack.config.ts .., и дает, например,следующие ошибки:
*.less файлы, начинающиеся с селектора идентификатора
Unexpected character '#' (1:1)
You may need an appropriate loader to handle this file type
*.less файлы, начинающиеся с @import
Module parse failed: Unexpected character '@' You may need an appropriate loader to handle this file type
*.ts (угловой компонент) содержащий @ Component
Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type
Я уже пытался переустановить node.js, очистить кэш npm, очистить папку node_modules и установить новую npm, перезагрузить компьютер несколько раз .. На другом компьютере, где у нас была такая же проблема, но онабыла «магически» решена после перезагрузки ..
раздел загрузчиков / правил webpack.config
rules: [
{
test: /\.ts$/,
include: [resolve(__dirname, "Assets")],
use: [
"ng-annotate-loader",
"ts-loader",
"angular-router-loader"
]
},
{
test: /\.less$/,
include: [resolve(__dirname, "Assets/StyleSheets"), resolve(__dirname, "Assets/NgComponentsNew"), resolve(__dirname, "Assets/WpBundles")],
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
plugins: () => [require('autoprefixer')({
'browsers': ['> 1%', 'last 2 versions']
})],
}
},
"less-loader"
]
},
{
test: /\.html$/,
include: [resolve(__dirname, "Assets/NgComponents"), resolve(__dirname, "Assets/NgComponentsNew")],
use: ["html-loader"]
},
{
test: /\.ico$/,
include: [resolve(__dirname, "Assets/Images")],
use: {
loader: "file-loader",
options: {
name: "Images/[name].[ext]"
}
}
},
{
test: /\.(png|jpg|gif)$/,
include: [resolve(__dirname, "Assets/Images"), resolve(__dirname, "Assets/Kendo")],
use: {
loader: "file-loader",
options: {
name: "Images/[name].[ext]",
publicPath: "/mvc/static/"
}
}
},
{
test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
include: [resolve(__dirname, "Assets"), resolve(__dirname, "./node_modules/@fortawesome/fontawesome-free/webfonts"), resolve(__dirname, "./node_modules/bootstrap/fonts")],
use: {
loader: "file-loader",
options: {
name: "Fonts/[name].[ext]",
publicPath: "/mvc/static/"
}
}
},
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
},
//avoid "import" warning
{
test: /[\/\\]@angular[\/\\].+\.js$/,
parser: { system: true }
}
]
},
package.json
{
"name": "ourproject",
"version": "1.1.0",
"description": "Client Npm Packages",
"main": "",
"dependencies": {
"@angular/animations": "7.2.13",
"@angular/common": "7.2.13",
"@angular/compiler": "7.2.13",
"@angular/core": "7.2.13",
"@angular/forms": "7.2.13",
"@angular/http": "7.2.13",
"@angular/platform-browser": "7.2.13",
"@angular/platform-browser-dynamic": "7.2.13",
"@angular/router": "7.2.13",
"@angular/upgrade": "7.2.13",
"@fortawesome/fontawesome-free": "5.6.3",
"@progress/kendo-angular-buttons": "4.4.0",
"@progress/kendo-angular-l10n": "1.4.0",
"angular": "1.7.8",
"angular-animate": "1.7.8",
"angular-filter": "0.5.17",
"angular-resource": "1.7.8",
"angular-sanitize": "1.7.8",
"angular-translate": "2.18.1",
"automapper-ts": "1.9.0",
"bootstrap": "3.3.7",
"bootstrap-less": "3.3.8",
"core-js": "3.0.0",
"eruda": "1.5.0",
"es5-shim": "4.5.10",
"golden-layout": "1.5.8",
"jquery": "3.3.1",
"jquery-ui-bundle": "1.12.1",
"jquery-validation-unobtrusive": "3.2.10",
"json3": "3.3.2",
"linq": "3.1.0",
"lodash": "4.17.11",
"moment": "2.22.2",
"reflect-metadata": "0.1.13",
"rxjs": "6.5.1",
"rxjs-compat": "6.5.1",
"zone.js": "0.8.26",
"core.js": "0.4.2"
},
"devDependencies": {
"@angular/language-service": "7.2.13",
"@types/angular": "1.6.48",
"@types/angular-resource": "1.5.14",
"@types/angular-sanitize": "1.3.7",
"@types/bootstrap": "3.3.39",
"@types/core-js": "2.5.0",
"@types/jasmine": "3.3.12",
"@types/jquery.validation": "1.16.4",
"@types/kendo-ui": "2018.1.2",
"@types/lodash": "4.14.110",
"@types/webpack": "4.4.27",
"@types/webpack-dev-server": "3.1.5",
"@types/webpack-env": "1.13.9",
"@types/node": "11.13.7",
"angular-router-loader": "0.8.5",
"autoprefixer": "9.5.1",
"awesome-typescript-loader": "5.2.1",
"css-loader": "2.1.1",
"expose-loader": "0.7.5",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"imports-loader": "0.8.0",
"jasmine": "3.4.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "2.0.0",
"karma-coverage": "1.1.2",
"istanbul-instrumenter-loader": "3.0.1",
"karma-remap-coverage": "0.1.5",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-jasmine-html-reporter": "1.4.1",
"karma-jasmine": "2.0.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "3.0.0",
"less": "3.9.0",
"less-loader": "4.1.0",
"mini-css-extract-plugin": "0.5.0",
"ng-annotate-loader": "0.6.1",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss-loader": "3.0.0",
"rimraf": "2.6.3",
"script-loader": "0.7.2",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-loader": "5.3.3",
"ts-node": "8.0.3",
"typescript": "3.4.5",
"url-loader": "1.1.2",
"util": "0.11.1",
"webpack": "4.30.0",
"webpack-bundle-analyzer": "3.3.2",
"webpack-cli": "3.3.0",
"webpack-dev-server": "3.3.1",
"webpack-merge": "4.2.1",
"webpack-node-externals": "1.7.2",
"webpack-stats-plugin": "0.2.1",
"protractor": "5.4.2",
"uglifyjs-webpack-plugin": "2.1.2"
}
Я ожидаю, что на каждоммашина с тем же node.js итот же веб-пакет npm будет правильно обрабатывать файлы
Есть ли что-то еще, что может повлиять на Webpack, так что загрузчики не используются / не распознаются?
Повторяю, эта конфигурация работает без проблем на других компьютерах..
Любая помощь будет высоко ценится.