我收到的错误是 webpack 无法将导出识别为关键字。我已经更新了 .babelrc 并安装了必要的依赖项。我确信这与不理解 es6 有关，但我找不到解决我的问题的解决方案。以下是查看我的依赖项、错误和重要文件所需的文件。
./index.scss 中的错误模块构建失败（来自
./node_modules/extract-loader/lib/extractLoader.js）：
/Users/rahmijamalpruitt/Documents/LetsGraduate/BigCo/CooleyProduct/White-Blob.png:1
导出默认值webpack_public_path+
“5d40bf92e9838f27f887c783f1001e8f.png”; ^^^^^^ 语法错误：意外
令牌“导出”
目录
CornellTech.png
buildings.jpeg
index.scss
Orange-Blob.png
index.css
node_modules
RahmiHeadShot.jpg
index.css.map
package-lock.json
SuitGuy.png
index.html
package.json
White-Blob.png
index.js
webpack.config.js
webpack.config.js
const autoprefixer = require("autoprefixer");
module.exports = {
entry: ["./index.scss", "./index.js"],
output: {
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "bundle.css"
}
},
{ loader: "extract-loader" },
{ loader: "css-loader" },
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer()]
}
},
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["./node_modules"]
}
}
}
]
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["@babel/preset-env"]
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
"file-loader",
{
loader: "image-webpack-loader",
options: {
bypassOnDebug: true, // [email protected] /cdn-cgi/l/email-protection
disable: true // [email protected] /cdn-cgi/l/email-protection and newer
}
}
]
}
]
}
};
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<>, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="bundle.css" />
</head>
<body>
<section class="page1">
<nav>
<ul>
<li class="Logo"><a> LOGO </a></li>
<li><a> about us </a></li>
<li>
<button class="sign-up-button mdc-button">sign up</button>
</li>
<li>
<button class="login-button mdc-button">login</button>
</li>
<li id="CornellLogo">
<img src="CornellTech.png" />
</li>
</ul>
</nav>
<div class="page-content">
<div id="images">
<div id="blob1"></div>
<div id="blob2"></div>
<div id="blob3"></div>
<div id="blob4"></div>
<div id="suit-guy"></div>
</div>
<div class="title">
<h1>The best tool for the best firms</h1>
<p>A new solution for the firm pushing the future fowards</p>
</div>
</div>
<div id="myModal" class="modal login">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</section>
<section class="page2">
<div id="building">
<img src="buildings.jpeg" />
</div>
<div id="product-description">
<h1>
Let this be the year of producivity
</h1>
</div>
</section>
<section class="page3">
<nav>
<ul>
<li class="Logo"><a> LOGO </a></li>
<li><h1>The Team</h1></li>
</ul>
</nav>
<div class="cards-grid">
<div class="card middle item1">
<div class="front">
<img src="RahmiHeadShot.jpg" alt="picture of Rahmi Pruitt" />
</div>
<div class="back">
<div class="back-content middle">
<h2>Rahmi Pruitt</h2>
<a
class="resume-link"
href="https://drive.google.com/file/d/1eANUSP0vOfGWgees6z51FFN0op4fzCPr/view?usp=sharing"
>
Software Engineer / Designer
</a>
<p>
Passionate about fullstack development. Resume can be seen below
</p>
</div>
</div>
</div>
<div class="card middle item2">
<div class="front">
<img src="RahmiHeadShot.jpg" alt="picture of Rahmi Pruitt" />
</div>
<div class="back">
<div class="back-content middle">
<h2>Rahmi Pruitt</h2>
<a
class="resume-link"
href="https://drive.google.com/file/d/1eANUSP0vOfGWgees6z51FFN0op4fzCPr/view?usp=sharing"
>
Software Engineer / Designer
</a>
<p>
Passionate about fullstack development. Resume can be seen below
</p>
</div>
</div>
</div>
<div class="card middle item3">
<div class="front">
<img src="RahmiHeadShot.jpg" alt="picture of Rahmi Pruitt" />
</div>
<div class="back">
<div class="back-content middle">
<h2>Rahmi Pruitt</h2>
<a
class="resume-link"
href="https://drive.google.com/file/d/1eANUSP0vOfGWgees6z51FFN0op4fzCPr/view?usp=sharing"
>
Software Engineer / Designer
</a>
<p>
Passionate about fullstack development. Resume can be seen below
</p>
</div>
</div>
</div>
<div class="card middle item4">
<div class="front">
<img src="RahmiHeadShot.jpg" alt="picture of Rahmi Pruitt" />
</div>
<div class="back">
<div class="back-content middle">
<h2>Rahmi Pruitt</h2>
<a
class="resume-link"
href="https://drive.google.com/file/d/1eANUSP0vOfGWgees6z51FFN0op4fzCPr/view?usp=sharing"
>
Software Engineer / Designer
</a>
<p>
Passionate about fullstack development. Resume can be seen below
</p>
</div>
</div>
</div>
<div class="card middle item5">
<div class="front">
<img src="RahmiHeadShot.jpg" alt="picture of Rahmi Pruitt" />
</div>
<div class="back">
<div class="back-content middle">
<h2>Rahmi Pruitt</h2>
<a
class="resume-link"
href="https://drive.google.com/file/d/1eANUSP0vOfGWgees6z51FFN0op4fzCPr/view?usp=sharing"
>
Software Engineer / Designer
</a>
<p>
Passionate about fullstack development. Resume can be seen below
</p>
</div>
</div>
</div>
</div>
</section>
<script type="module" src="/bundle.js" async></script>
</body>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
<script src="homepage.js"></script>
</html>
.babelrc
{
"presets": ["@babel/preset-env"]
}
包.json
{
"name": "cooleyproduct",
"version": "1.0.0",
"description": "",
"main": "homepage.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.7.7",
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.0",
"extract-loader": "^3.1.0",
"file-loader": "^5.0.2",
"image-webpack-loader": "^6.0.0",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"@material/button": "^4.0.0",
"@material/ripple": "^4.0.0"
}
}
