我有这个 > 5 岁的 Angular 1.5.8 项目,由其他人开发,使用 webpack 2.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:\sgn\www\_g\test\node_modules\less\index.js' is not a loader (must have normal or pitch function)
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:43:20)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:179:3)
at NormalModule.build (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:268:15)
at Compilation.buildModule (D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:146:10)
at D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:433:9
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:253:5
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:99:14
at D:\sgn\www\_g\test\node_modules\tapable\lib\Tapable.js:268:11
at NormalModuleFactory.<anonymous> (D:\sgn\www\_g\test\node_modules\webpack\lib\CompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\sgn\www\_g\test\node_modules\tapable\lib\Tapab
le.js:272:13)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:74:11
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:205:8
at processTicksAndRejections (internal/process/task_queues.js:79:11)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:192:19
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:172:11
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:43:11)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:179:3)
at NormalModule.build (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:268:15)
at Compilation.buildModule (D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:146:10)
at D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:433:9
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:253:5
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:99:14
at D:\sgn\www\_g\test\node_modules\tapable\lib\Tapable.js:268:11
at NormalModuleFactory.<anonymous> (D:\sgn\www\_g\test\node_modules\webpack\lib\CompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\sgn\www\_g\test\node_modules\tapable\lib\Tapab
le.js:272:13)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:74:11
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.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"
}
}
...而且,坦率地说,当我确保使用其依赖项的那些确切版本时,我期待它能够构建。但错误仍然存在。
我尝试的第二件事是降级节点。我尝试使用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 问题,但没有遇到任何可以提示我走向正确方向的东西。
感谢您花时间研究此问题以及您可能提出的任何建议。