在 Next.js 中为静态页面修改 webpack答案

【问题标题】：Modifying webpack in Next.js for static page在 Next.js 中为静态页面修改 webpack
【发布时间】：2018-01-14 20:33:34
【问题描述】：

我正在尝试通过创建静态 index.html 页面并通过 index.html 中的 head 标记导入必要的文件，将 Materialize.css 与我的 Next.js 应用程序一起使用。

我的index.html 包含以下内容：

    <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
      <script src="bundle.js"></script>
    </body>
  </html>

我创建了一个next.config.js 文件，其中包含以下内容：

module.exports = {
  webpack: (config, { buildId, dev }) => {
      entry: './pages/index.js',
      output: {
        filename: 'bundle.js'
       }
    return config
  },
  webpackDevMiddleware: config => {
    // Perform customizations to webpack dev middleware config

    // Important: return the modified config
    return config
  }
}

运行npm run dev 时出现以下错误：

输出：'bundle.js'

^ SyntaxError: Unexpected token :

如何编辑此配置文件以创建bundle.js 并将我的index.js 提供给我的index.html？

【问题讨论】：

无需在 Webpack 配置中进行配置，Next.js 会为您提供开箱即用的处理。您可以使用next export 导出静态站点。阅读static export in Next.js。

标签： javascript webpack materialize next.js

【解决方案1】：

Next.js 为您处理包的入口点。如果您需要编辑应用程序返回的 html 的头部，您必须编辑 _document.js 并在此处添加您需要的标签。 https://github.com/zeit/next.js/tree/master#custom-document

【讨论】：

【解决方案2】：

您的next.config.js 似乎是错误的，因为当它是一个函数时，您将它部分视为一个对象。您应该尝试的第一件事是正确设置您感兴趣的属性

webpack: (config, { buildId, dev }) => {
    config.output.filename = 'bundle.js'; 

    // if you want to see the options you have you can just 
   console.log(config);

   return config
  }

如果你想要的只是一个静态页面的捆绑包，只需添加 "export": "next build && next export" 到您的 package.json 而不更改 next.config.js（使用它们的默认值）。运行它，默认情况下它将在项目的根目录中创建一个out/_next 文件夹。在_next 中，您将找到您的静态index.html 以及对您的代码的引用。

【讨论】：