Fatal编程技术网
  • javascript/
  • Javascript 意外标记“；“出口”；网页包内构建

Javascript 意外标记“；“出口”；网页包内构建

javascript npm webpack ecmascript-6

Javascript 意外标记“；“出口”；网页包内构建,javascript,npm,webpack,ecmascript-6,static-site,Javascript,Npm,Webpack,Ecmascript 6,Static Site,我得到的错误是webpack无法将导出识别为关键字。我已经更新了我的.babelrc并安装了必要的依赖项。我确信这与不理解es6有关，但我找不到解决问题的方法。下面是查看我的依赖项、错误和重要文件所必需的文件 ./index.scss模块生成中出错失败（从 ./node_modules/extract loader/lib/extract loader.js）： /Users/rahmijamalpruitt/Documents/letsgradudate/BigCo/CooleyProduct

我得到的错误是webpack无法将导出识别为关键字。我已经更新了我的.babelrc并安装了必要的依赖项。我确信这与不理解es6有关，但我找不到解决问题的方法。下面是查看我的依赖项、错误和重要文件所必需的文件

./index.scss模块生成中出错失败（从 ./node_modules/extract loader/lib/extract loader.js）： /Users/rahmijamalpruitt/Documents/letsgradudate/BigCo/CooleyProduct/White Blob.png:1 导出默认网页包\u公共\u路径+ “5d40bf92e9838f27f887c783f1001e8f.png”；^SyntaxError:意外 代币“出口”

目录

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, // webpack@1.x
              disable: true // webpack@2.x and newer
            }
          }
        ]
      }
    ]
  }
};
index.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">&times;</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>
package.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"
  }
}
我发现从webpack.config.js中删除extract loader插件足以让代码运行。我认为这与extract loader插件无法与SCS一起工作有关。文件中明确表示，它是为以下目的而构建的。如果有人仍然对提取加载程序插件感兴趣，可以找到它，它解决了相同的问题设置
esModule:false
选项和
文件加载程序

{
  "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"
  }
}