我从webpack 1.x迁移到4.30。节点版本：10.15.3打字稿版本：3.4.5npm版本：6.9.0
此设置可在3台（Windows）PC上运行，但不适用于一台特定计算机，尽管它们都使用相同版本的node，webpack，npm和其他npm软件包。
在不工作的机器上，好像Webpack不使用webpack.config.ts ..中定义的less-loader和ts-loader，并给出例如以下错误：
*.less个以id选择器开头的文件
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安装，重新启动PC数次。在另一台存在相同问题的PC上，但重新启动后“神奇地”解决了。]
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的每台机器上都能正确处理文件
还有其他可能影响Webpack的东西，因此不使用/识别装载程序吗？
我再说一遍，此配置在其他PC上没有任何问题。。
任何帮助将不胜感激。。
我从webpack 1.x迁移到4.30。节点版本：10.15.3打字稿版本：3.4.5 npm版本：6.9.0此设置适用于3台（Windows）PC，但不适用于一台特定计算机，尽管它们都...
在我的情况下，问题是我们已对存储库进行了重组，使其具有单个根级package.json文件，而不是多个子目录中的每个子目录中的一个。这意味着除非所有人都删除旧的node_modules文件夹，否则Webpack会找到一个过时的文件夹并在其中查找ts-loader，而不是在正确的位置查找。