当我将"next-videos" loader添加到next.config.js
时,只要module.exports
位于最后一个,它就可以完美地工作:
module.exports = withVideos()
另一方面,它会中断位于上方的module.exports
的另一个执行严修:
module.exports = {
images: {
domains: ['cdn.shopify.com'],
},
};
基本上,它会覆盖以前的每一个module.exports
。合并这些导出的规则是什么?我想我需要把它们放在一个模块下,但是这样做的规则是什么?我把语法搞得一团糟,每次尝试将它重新定位到一个module.exports
下都会导致新的错误
总结一下这些问题:
1.在单个导出中组合模块的规则是什么?如何将其与以前的所有模块导出组合?
1.**我真的需要把“webpack(config)”部分保留在next.config中吗?**我从不同的来源收集了它,现在正在尝试弄清楚它是如何工作的
webpack(config) {
config.module.rules.push(
next.config.js的内容:
const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withVideos = require('next-videos');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
// next.config.js
module.exports = withPlugins(
[[withImages], [withSass], [withCSS], [withVideos]],
{
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
serverRuntimeConfig: {
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/public',
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000',
},
{
test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
},
{
test: /\.mp4$/,
use: 'file-loader?name=videos/[name].[ext]',
},
{
test: /\.style.js$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: { parser: 'sugarss', exec: true },
},
],
},
],
},
webpack(config) {
config.module.rules.push(
{
test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
},
{
test: /\.style.js$/,
use: [
'style-loader',
'css-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: { parser: 'sugarss', exec: true },
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
);
withBundleAnalyzer({});
return config;
},
},
{
images: {
domains: ['cdn.shopify.com'],
},
},
withVideos(),
);
module.exports = {
extends: 'airbnb-base',
rules: {
'arrow-body-style': 0,
},
};
module.exports = {
images: {
domains: ['cdn.shopify.com'],
},
};
module.exports = withVideos();
2条答案
按热度按时间hgqdbh6s1#
您似乎在Next.js配置文件中错误地混合了几个配置。
不带
next-compose-plugins
没有必要使用
next-compose-plugins
。Next.js插件是可链接的,你可以将每个插件调用嵌套在下一个插件调用中,并在最后一个调用中传递实际的config对象。你的next.config.js
文件也应该只有一个module.exports
。使用
next-compose-plugins
如果您使用
next-compose-plugins
,它应该大致遵循以下结构:最后,下面的配置属于您的ESlint配置文件,而不是Next.js配置。
6l7fqoea2#
当我试图从节点包访问全局css文件到Next JS Page时,我遇到了类似的问题,经过多次尝试,我通过更改以下内容解决了这个问题:
当需要使用多个插件或一个普通的
JSON
配置与插件时,您需要 Package 插件内的原始配置。就你的情况而言,