我有这个>5年前别人开发的Angular 1.5.8项目,使用的是webpack2.7.0
。它当前无法构建。错误似乎是在第一个.css
文件中遇到的,该文件恰好是angular-material.css
:
[96] ./~/angular-material/angular-material.css 1.04 kB {0} [built] [failed] [1 error]
再往下走,我收到两个警告:
WARNING in DedupePlugin: This plugin was removed from webpack. Remove it from your configuration.
WARNING in webpack: Using NoErrorsPlugin is deprecated.
Use NoEmitOnErrorsPlugin instead.
然后是一堆类似的错误(超过500行(,其中我只介绍了第一个:
ERROR in ./src/styles/main.less
Module build failed: ModuleBuildError: Module build failed: LoaderRunnerError: Module 'D:sgnwww_gtestnode_moduleslessindex.js' is not a loader (must have normal or pitch function)
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:43:20)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:165:10)
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:176:18
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:47:3)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:165:10)
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:176:18
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:47:3)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at runLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:365:2)
at NormalModule.doBuild (D:sgnwww_gtestnode_moduleswebpacklibNormalModule.js:179:3)
at NormalModule.build (D:sgnwww_gtestnode_moduleswebpacklibNormalModule.js:268:15)
at Compilation.buildModule (D:sgnwww_gtestnode_moduleswebpacklibCompilation.js:146:10)
at D:sgnwww_gtestnode_moduleswebpacklibCompilation.js:433:9
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:253:5
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:99:14
at D:sgnwww_gtestnode_modulestapablelibTapable.js:268:11
at NormalModuleFactory.<anonymous> (D:sgnwww_gtestnode_moduleswebpacklibCompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:sgnwww_gtestnode_modulestapablelibTapab
le.js:272:13)
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:74:11
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:205:8
at processTicksAndRejections (internal/process/task_queues.js:79:11)
at D:sgnwww_gtestnode_moduleswebpacklibNormalModule.js:192:19
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:367:11
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:172:11
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:43:11)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:165:10)
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:176:18
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:47:3)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:165:10)
at D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:176:18
at loadLoader (D:sgnwww_gtestnode_modulesloader-runnerlibloadLoader.js:47:3)
at iteratePitchingLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:169:2)
at runLoaders (D:sgnwww_gtestnode_modulesloader-runnerlibLoaderRunner.js:365:2)
at NormalModule.doBuild (D:sgnwww_gtestnode_moduleswebpacklibNormalModule.js:179:3)
at NormalModule.build (D:sgnwww_gtestnode_moduleswebpacklibNormalModule.js:268:15)
at Compilation.buildModule (D:sgnwww_gtestnode_moduleswebpacklibCompilation.js:146:10)
at D:sgnwww_gtestnode_moduleswebpacklibCompilation.js:433:9
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:253:5
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:99:14
at D:sgnwww_gtestnode_modulestapablelibTapable.js:268:11
at NormalModuleFactory.<anonymous> (D:sgnwww_gtestnode_moduleswebpacklibCompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:sgnwww_gtestnode_modulestapablelibTapab
le.js:272:13)
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:74:11
at D:sgnwww_gtestnode_moduleswebpacklibNormalModuleFactory.js:205:8
at processTicksAndRejections (internal/process/task_queues.js:79:11)
@ ./src/app/app.js 41:0-30
我尝试的第一件事是从package.json中的所有依赖项中删除所有^
组合子,如下所示:
{
"name": "***",
"version": "1.0.0",
"description": "***",
"main": "app.js",
"scripts": {
"build": "webpack --progress --profile",
"dev": "webpack-dev-server --inline --open --progress --colors --watch"
},
"author": "Dovydas Martusevicius",
"license": "MIT",
"dependencies": {
"ajv": "^4.11.2",
"angular": "1.5.8",
"angular-animate": "1.5.8",
"angular-aria": "1.5.8",
"angular-chart.js": "1.1.1",
"angular-chartjs": "0.0.5",
"angular-material": "^1.1.0",
"angular-material-data-table": "0.10.9",
"angular-messages": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-ui-bootstrap": "2.4.0",
"angular-ui-router": "0.3.1",
"animate.css": "3.5.1",
"babel-polyfill": "6.13.0",
"less": "^3.9.0",
"moment": "2.17.1",
"normalize.css": "4.2.0"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015-native-modules": "^6.9.4",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"less-loader": "^2.2.3",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"webpack": "^2.7.0",
"webpack-dev-server": "^1.15.0"
}
}
坦率地说,当我确保使用了它的依赖关系的确切版本时,我正期待着它的构建。但错误依然存在。
我尝试的第二件事是降级node。我尝试用13.11.0
(最初(、12.18.3
、8.11.3
和5.12.0
构建它。
一般来说,我对webpack不太好,但当谈到v2.*
时,我完全迷失了方向。
以下是webpack配置:
'use strict';
//Modules
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//Environment
const env = process.env.npm_lifecycle_event;
var isTest = env === 'test' || env === 'test-watch';
var isProd = env === 'build';
module.exports = {
devtool: 'source-map',
entry: {
app: './src/app/app.js'
},
devServer: {
outputPath: path.join(__dirname, 'src'),
contentBase: "./src"
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: isProd ? '' : 'http://localhost:8080/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js',
chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js'
},
resolve: {
// you can load named modules from any dirs you want.
// attempts to find them in the specified order.
modules: [
'./src/lib',
'node_modules'
]
},
module: {
loaders: [
//HTML Files
{
test: /.html$/,
loader: 'html-loader'
},
//Transpile ES6 to ES5
{
test: /.js$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
["es2015", {"module": false}]
]
}
},
//Extract Normal CSS
{
test: /.css$/,
loader: ExtractTextPlugin.extract('css-loader?sourceMap!autoprefixer')
},
//Bundle Less into CSS Code
{
test: /.less$/,
loader: ExtractTextPlugin.extract('css-loader?sourceMap!autoprefixer!less?sourceMap')
},
//Images
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
}
]
},
plugins : (() => {
let plugins = [];
//Render Index.html, Extract CSS
plugins.push(
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body'
}),
// Write out CSS bundle to its own file:
new ExtractTextPlugin({
filename: 'css/styles.css',
allChunks: true})
);
//If prod do extra stuff
if (isProd) {
plugins.push(
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Minimize JS
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: true
})
/*new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])*/
)
}
return plugins;
})()
};
我花了相当多的时间阅读与webpack及其加载程序相关的github问题,但没有发现任何能提示我走向正确方向的内容。
感谢您花时间对此进行研究,以及您可能提出的任何建议。
如果问题仅与特定模块有关,则可以执行以下操作,
1-重新安装该特定模块(删除后安装(。
2-尝试升级或降级模块版本。
考虑到该项目目前已有5年历史,我想更改版本可能会解决您的问题。