云服务器代理商-凯铧互联

nextjs 和 antd 实例 webpack build 打包上线

.babelrc 配置:

{
  "presets": ["next/babel"],
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": true }]
  ]
}

next.config.js  配置:

const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const withPlugins = require("next-compose-plugins");
const cssLoaderGetLocalIdent = require("css-loader/lib/getLocalIdent.js");
const path = require('path');

module.exports = withPlugins([withLess,withCss], {
  lessLoaderOptions : {//如果是antd就需要,antd-mobile不需要
    javascriptEnabled : true
  },
  cssModules: true,
  cssLoaderOptions: {
    camelCase: true,
    //localIdentName: "[local]___[hash:base64:5]",
    localIdentName: "[local]___[hash:base64:5]",
    getLocalIdent: (context, localIdentName, localName, options) => {
      let hz = context.resourcePath.replace(context.rootContext, "");
      if (/node_modules/.test(hz)) {
        return localName;
      } else {
        return cssLoaderGetLocalIdent(
          context,
          localIdentName,
          localName,
          options
        );
      }
    }
  },
  webpack(config){
    if(config.externals){
      const includes = [/antd-mobile/];
      config.externals = config.externals.map(external => {
        if (typeof external !== 'function') return external;
        return (ctx, req, cb) => {
          return includes.find(include =>
            req.startsWith('.')
              ? include.test(path.resolve(ctx, req))
              : include.test(req)
          )
            ? cb()
            : external(ctx, req, cb);
        };
      });
    }
    return config;
  }
});

赞(0) 打赏
未经允许不得转载:云服务器代理商-凯铧互联 » nextjs 和 antd 实例 webpack build 打包上线

评论 抢沙发

评论前必须登录!

 

凯铧互联专注云计算

联系我们了解更多

觉得文章有用就打赏一下文章作者

微信扫一扫打赏