我从 webpack 1.x 迁移到 4.30。 Node 版本:10.15.3 typescript 版本:3.4.5 npm 版本:6.9.0
此设置适用于 3 台(Windows)电脑，但不适用于一台特定机器，尽管它们都使用相同版本的 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安装，重新启动电脑几次。 在另一台电脑上，我们遇到了同样的问题，但重新启动后“神奇”地解决了..
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，导致加载器无法使用/识别？
我再说一遍，这个配置在其他电脑上运行没有任何问题..
任何帮助将不胜感激..
最佳答案
就我而言，问题是我们重组了我们的存储库以拥有单个根级别 package.json文件，而不是多个子目录中每个子目录中的一个。这意味着除非每个人都删除旧的 node_modules文件夹，webpack 会找到一个过时的文件夹并在那里查找 ts-loader而不是寻找正确的地方。
可以通过使用 resolveLoader 告诉 webpack 在哪里寻找加载器来避免这种情况。配置选项。例如:
resolveLoader: {
modules: [path.resolve(__dirname, '../../../node_modules')],
mainFields: ['ts-loader']
},
请注意 documentation对于 resolve.modules ，这也适用于 resolveLoader.modules ，状态:
Absolute and relative paths can both be used, but be aware that they will behave a bit differently.
A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (i.e. ./node_modules, ../node_modules, and on).
With an absolute path, it will only search in the given directory.
默认行为似乎对应于相对路径方法--any node_modules目录树中 webpack 配置文件和包含 node_modules 的文件夹之间的文件夹将使用您期望使用的文件夹，在我们的例子中，当我们尝试更新 TypeScript 时，这会导致您所描述的确切问题。
关于node.js - Webpack 4 ts-loader 和 less-loader 在某些电脑上无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56109366/