javascript - NextJs - next.config.js - CSS 加载器 + 自定义 Webpack 配置

标签 javascript reactjs webpack next.js

我正在使用 NextJS,并且正在尝试自定义我的配置。到目前为止,我已经尝试添加CSS支持+文件支持。

这是我的 next.config.js :

const webpack = require("webpack");  
const withCSS = require('@zeit/next-css');


module.exports = withCSS({

  webpack : (config, { dev }) => {
    config.module.rules.push({
            test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: "file-loader",
            options: {
              name: "public/media/[name].[ext]",
              publicPath: url => url.replace(/public/, "")
            }
          });
    return config;
  } 
})

我的控制台返回我:

UnhandledPromiseRejectionWarning: Error: Chunk.entrypoints: Use Chunks.addGroup instead

我无法弄清楚什么失败了。

如果有人有提示,那就太好了,

谢谢

最佳答案

您是否尝试过用其他方式包装它? 这可能有效(不是 100%):

module.exports = (config, { dev }) =>{
config.module.rules.push({
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: "file-loader",
        options: {
          name: "public/media/[name].[ext]",
          publicPath: url => url.replace(/public/, "")
        }
      });
return withCss(config);

} }

还有一个 withImages 包装器,https://github.com/twopluszero/next-images

const withImages = require('next-images') 
module.exports = withImages(withCss())

关于javascript - NextJs - next.config.js - CSS 加载器 + 自定义 Webpack 配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51738227/

相关文章:

javascript - 水平无序列表的新行

reactjs - 使用 jest-each 进行动态数据测试

javascript - Webpack - 动态导入类

angular - 使用 WebPack 在 Syncfusion Ej2 中实现国际化

javascript - Fancybox打不开

javascript - 用js打印数组并用jQuery添加html

javascript - 使用 jquery 或 javascript(单击)在 html 中设置工具提示的数据属性

javascript - React Router如何处理url变化而不引起浏览器请求

javascript - 如何测试 React 组件使用 jest 渲染列表

backbone.js - Webpack 开发服务器无法加载嵌套 url(GET 404 错误)