ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

修改webpack配置

2022-07-14 16:37:08  阅读:156  来源: 互联网

标签:const less 配置 修改 webpack output config options


1.可使用eject暴露出webpack的配置

 虽然扩展了 webpack 配置,但是再也享受不到 CRA 升级带来的好处了。因为react-scripts已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。

2.可使用react-app-rewired

例子是qiankun的微应用使用less

(1)安装相关的依赖 less相关版本推荐如下,避免一些奇怪问题

npm install react-app-rewired --save-dev
npm install customize-cra --save-dev
npm install less@3.11.3 less-loader@6.1.0 --save-dev

 (2)新建confg-overrides.js

const { name } = require('./package.json');
const { override, addLessLoader, overrideDevServer, watchAll } = require(
  'customize-cra');

const { NODE_ENV, REACT_APP_ROUTER_PATH } = process.env;

module.exports = {
  webpack: override(
    (config) => {
      config.output.library = `${name}-[name]`;
      config.output.libraryTarget = 'umd';
      config.output.globalObject = 'window';
      config.output.publicPath = NODE_ENV === 'production' ? `${REACT_APP_ROUTER_PATH}/` : '';
      return config;
    },

    /** 增加代码 **/
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
      },
    }),
    /** 增加代码 **/
  ),

  devServer: overrideDevServer(
    (config) => {
      config.open = false;
      config.hot = false;
      config.headers = { 'Access-Control-Allow-Origin': '*' };
      return config;
    },
    watchAll(),
  ),

};

 遇到的问题:

PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid:
github搜到的解决方案,亲测有效,增加如下配置

adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  }),

标签:const,less,配置,修改,webpack,output,config,options
来源: https://www.cnblogs.com/yigexiaojiangshi/p/16478228.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有