Question

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

我的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后，我收到以下错误：

输出：＆＃39; bundle.js＆＃39;

^ SyntaxError：意外的令牌：

如何编辑此配置文件以创建bundle.js并将index.js投放到我的index.html？

Answer 1

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

Answer 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内，您会发现您的静态mongoose.connect以及对您的代码的引用。

修改Next.js中的webpack以获取静态页面

2 个答案: