在Next.js中为静态页面修改Webpack
[英]Modifying webpack in Next.js for static page
问题描述
I am trying to use Materialize.css with my Next.js app by creating a static index.html page and importing the necessary files through the head tag in index.html . 
我试图通过创建静态index.html页面并通过index.html的head标记导入必要的文件，来将Materialize.css与Next.js应用程序一起使用。
My index.html contains the following: 我的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>
I have created a next.config.js file with the following: 我创建了一个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
}
}
Upon running npm run dev I get the following error: 运行npm run dev ，出现以下错误：
output: 'bundle.js'
^ SyntaxError: Unexpected token :
How do I edit this config file to create the bundle.js and serve my index.js into my index.html ? 如何编辑此配置文件以创建bundle.js并将index.js服务到index.html ？
2 个解决方案
解决方案1
0 2018-09-10 12:23:03
Next.js handle the bundle's entrypoint for you. Next.js为您处理包的入口点。 If you need to edit che head of the html returned by your application, you have to edit the _document.js and add here the tags you need. 如果您需要编辑应用程序返回的html的_document.js ，则必须编辑_document.js并在此处添加所需的标签。 https://github.com/zeit/next.js/tree/master#custom-document https://github.com/zeit/next.js/tree/master#custom-document
解决方案2
-1 2018-02-22 13:48:39
Your next.config.js seems to be wrong because you are treating it in part like an object when it is a function. 您的next.config.js似乎是错误的，因为当它是一个函数时，您next.config.js其部分当作对象对待。 The first thing you should try is setting your properties of interest correctly 您应该尝试的第一件事是正确设置您感兴趣的属性
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
}
If what you want is to just have a bundle for a static page just add "export": "next build && next export" to your package.json without altering the next.config.js (use their default). 如果您只想为静态页面添加一个包，则只需在您的package.json添加"export": "next build && next export" ，而无需更改next.config.js （使用默认值）。 Run that and by default it will create a out/_next folder in the root of your project. 运行该文件，默认情况下，它将在项目的根目录中创建一个out/_next文件夹。 Inside _next you will find your static index.html with the references to your code. 在_next内部，您将找到带有对代码引用的静态index.html 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.