我正在关注Material Design Components Basics的教程,并且遇到了Web Pack的问题。我犯了运行npm audit fix
的错误,甚至犯了一个更大的错误,就是不注意这样做。
当我尝试运行npm start
时,出现此错误:
「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration[0] has an unknown property 'mode'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, extern
这是我的webpack.config.js
文件的样子:
function getStyleUse(bundleFilename) {
return [
{
loader: 'file-loader',
options: {
name: bundleFilename,
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
implementation: require('dart-sass'),
fiber: require('fibers'),
}
},
];
}
module.exports = [
{
entry: './login.scss',
output: {
// This is necessary for webpack to compile, but we never reference this js file.
filename: 'style-bundle-login.js',
},
module: {
rules: [{
test: /login.scss$/,
use: getStyleUse('bundle-login.css')
}]
},
},
{
entry: './home.scss',
output: {
// This is necessary for webpack to compile, but we never reference this js file.
filename: 'style-bundle-home.js',
},
module: {
rules: [{
test: /home.scss$/,
use: getStyleUse('bundle-home.css')
}]
},
},
{
entry: "./login.js",
output: {
filename: "bundle-login.js"
},
module: {
loaders: [{
test: /login.js$/,
loader: 'babel-loader',
query: {presets: ['env']}
}]
},
},
{
entry: "./home.js",
output: {
filename: "bundle-home.js"
},
module: {
loaders: [{
test: /home.js$/,
loader: 'babel-loader',
query: {presets: ['env']}
}]
},
}
];
和我的package.json
{
"name": "mdc-101-web",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "webpack-dev-server --progress"
},
"license": "MIT",
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^2.1.1",
"dart-sass": "^1.17.2",
"extract-loader": "^1.0.2",
"fibers": "^3.1.1",
"file-loader": "^1.1.11",
"sass-loader": "^7.1.0",
"webpack": "^3.0.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"@material/button": "^1.0.1",
"@material/ripple": "^1.0.1",
"@material/textfield": "^1.0.1"
}
}
我尝试卸载webpack:npm uninstall -g webpack
也尝试删除node_modules
(rm -rf node_modules
)。我也尝试过npm cache clean --force
。我似乎无法解决这个问题。我没有看到mode
或项目中其他任何地方引用的webpack.config.js
属性。
答案 0 :(得分:1)
在第2步中阅读有关Webpack的注释后:
有关其配置的详细信息,请参见Getting Started guide。
我看到了这个笔记:
注意:我们建议使用webpack 3,因为我们仍在研究使用webpack4。我们还建议您使用webpack-dev-server 2,因为它可以与webpack 3一起使用。
运行此命令以安装Webpack 3后,它开始工作:
npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
有人想评论npm audit fix
可能会做什么吗?
答案 1 :(得分:1)
css
关于sassOptions中includePaths的更多信息是here。
答案 2 :(得分:0)
将module.exports = []更改为module.exports = {}