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

sbwxffnhc發表於2019-01-12
ReactWeb

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庫的樣式

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

3.2 載入less 並修改主題

參照 css 的做法，複製後改成less的，程式碼類似,新增了主題的修改

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

程式碼： 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"
                  }
                }
              }
            ],
          },
複製程式碼

相關文章