react暴露後，webpack4.19.1實現按需加載antd

react項目，yarn eject後暴露出webpack版本爲 "webpack": "4.19.1", "webpack-dev-server": "3.1.14", ，相對於之前的 "webpack": "3.8.1","webpack-dev-server": "2.9.4",有大的不一樣， 其中將之前的webpack.config.dev.js和webpack.config.prod.js合併成webpack.config.js。

如今咱們來對比下如何在新的"webpack": "4.19.1"中添加less-loader，而且經過插件babel-plugin-import實現antd的按需加載。

1 安裝babel-plugin-import

yarn add babel-plugin-import
yarn add antd
yarn add less-loader
複製代碼

2 "webpack": "4.19.1" 加載antd並修改主題

參考：blog.csdn.net/qq_37674616…

2.1 修改package.json：添加antd庫的樣式

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }
複製代碼

提示:若是在package.json中沒有看到上面的形式，則須要先 reject項目。

2.2 定製主題

因爲antd樣式使用less開發的，因此咱們能夠定義全局變量進行覆蓋

yarn reject
複製代碼

修改配置環境（webpack.config.js）

定義全局變量

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
//在這添加
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
 
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

複製代碼

配置less-loader

//@To-do 原來的內容
// Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
 {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
 },
 
//@To-do 添加以下內容
 
   {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
 },

複製代碼

定義全局樣式

//@To-Do 註釋原來內容  
// if (preProcessor) {
  //   loaders.push(require.resolve(preProcessor));
  // }
 
//@To-do 新添加內容
  if (preProcessor) {
    let loader = require.resolve(preProcessor)
    if (preProcessor === "less-loader") {
      loader = {
        loader,
        options: {
          modifyVars: { //自定義主題
            'primary-color':' #1890ff ',
          },
          javascriptEnabled: true,
        }
      }
    }
    loaders.push(loader);
  }
  return loaders;

複製代碼

修改package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true  //修改處
        }
      ]
    ]
  }
複製代碼

注意：關於爲什麼要style = true

3 "webpack": "3.1.14" 加載antd並修改主題

3.1 修改JS的，添加antd庫的樣式

3.2 加載less 並修改主題

參照 css 的作法，複製後改爲less的，代碼相似,添加了主題的修改

代碼： js:

// Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                ['import', [{ libraryName: 'antd', style: true }]],  // import less
              ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

複製代碼

less：

{
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { loader:require.resolve('less-loader'), options: { modules: false, modifyVars: { "@primary-color": "#f9c700" } } } ], }, 複製代碼