Next.js和Webpack内联Javascript或CSS资源
我有以下用例:我需要使用React和Next.js生成静态文件。为此,我使用以下内容扩展了next.config.js:Next.js和Webpack内联Javascript或CSS资源,javascript,node.js,reactjs,webpack,next.js,Javascript,Node.js,Reactjs,Webpack,Next.js,我有以下用例:我需要使用React和Next.js生成静态文件。为此,我使用以下内容扩展了next.config.js: module.exports = { exportTrailingSlash: true, exportPathMap: async function () { const paths = { '/': { page: '/' } } const errorPages = [ { id: 1, name: '404',
module.exports = {
exportTrailingSlash: true,
exportPathMap: async function () {
const paths = {
'/': { page: '/' }
}
const errorPages = [
{ id: 1, name: '404', lang: 'en' },
{ id: 2, name: '500', lang: 'en' }
]
errorPages.forEach(errorPage => {
paths[`/errorPage/${errorPage.id}`] = {
page: '/errorPage/[id]',
query: { id: errorPage.id }
}
})
return paths
},
}
这完全有效。文件在npm导出后在out
文件夹中生成
然而,另一个用例是:
index.html文件需要在任何地方工作,而不仅仅是在out
文件夹中的确切位置。例如,另一个webapp查询一个API,该API扫描index.html并从该文件返回字符串形式的html。这个hrml字符串必须工作,但是js文件/捆绑包的引用是相对的(请参见链接和脚本标记):
它不会将资源转换为内联格式并保持链接。是否有办法通过添加任何其他网页包来实现所需的结果,或者配置是否错误
提前谢谢
编辑:这是我的project.json依赖项部分:
"dependencies": {
"isomorphic-unfetch": "^3.0.0",
"next": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0"
}
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
module.exports = {
exportTrailingSlash: true,
exportPathMap: async function () {
const paths = {
'/': { page: '/' }
}
const errorPages = [
{ id: 1, name: 404', lang: 'en' },
{ id: 2, name: '500', lang: 'en' }
]
errorPages.forEach(errorPage => {
paths[`/errorPage/${errorPage.id}`] = {
page: '/errorPage/[id]',
query: { id: errorPage.id }
}
})
return paths
},
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.plugins.push(
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // embed all javascript and css inline
})
)
config.plugins.push(new HtmlWebpackInlineSourcePlugin())
return config
}
}
"dependencies": {
"isomorphic-unfetch": "^3.0.0",
"next": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0"
}