引入less
如果項目根目錄中沒有config文件夾，首先暴露出項目配置文件，項目下執行：
npm run eject
如果項目是從git倉庫中pull下來的的話，必須確保本地項目與倉庫中沒有衝突，才能夠eject成功，否則命令會報錯，因爲該操作是不可逆的，一旦暴露出配置文件後eject功能將被刪除。
eject成功後項目下會多出兩個文件夾，config和scripts，我們開發中一般只需關心config文件下的webpack.config.dev.js、webpack.config.prod.js、webpackDevServer.config.js,其他多出來的文價不要管他：
然後安裝less和lessloader：
cnpm i less less-loader --save
修改webpack.config.dev.js和webpack.config.prod.js，兩個文件一樣的地方修改，找到配置中的module.rules下面的test: /\.css$/處的配置,需要改的地方：
將其改爲：
{
test: /\.(css|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') }
],
},
然後就可以在項目中暢用less了，sass配置方法一樣，只是安裝的包不一樣，node-sass和sass-loader----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
不過現在create-react-app默認安裝版本是2.03了，其中有些改變，在新版本腳手架中css的rules.test的值被提取到外面聲明爲一個變量，並將css的rules.use同樣提取爲一個函數在外部聲明，函數接受兩個參數，第一個爲傳入css-loader的Options，第二個爲可選，就是需要添加的loader，最後返回配置後的loader數組：
看到這裏發現其實只是變換了寫法而已，並且新版本腳手架中已經配置了sass了，依葫蘆畫瓢，最笨的辦法就是也定義兩個關於less的變量：
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
然後在oneOf數組最後複製sass的兩個loader配置追加到後面，將變量對應的改爲上面自己聲明的變量，並將第二個參數'sass-loader'改爲'less-loader'：
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
然後重新運行即可，親測！
不要忘記兩個配置文件都要改哦！
按需引入antd組件
安裝使用不多說了直接進入正題，如何按需加載，使用需要用到的組件：
import { Button } from 'antd'
安裝按需引入所需要的插件：
cnpm i babel-plugin-import --save-dev
然後在package.json中babel屬性下添加：
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]
完整的應該是：
"babel": {
"presets": [
"react-app"
],
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]
},
當然這個不在package.json中配置也行，在.babelrl中配置也可以，或者在webpack.config.js中配置也可以，但是因爲要同時改dev和prod兩個文件會比較麻煩，pugins是個二維數組！！不要複製粘貼錯了哦！
修改antd默認主題顏色
這樣就實現了antd組件按需加載了，不需要再額外引入組件樣式了，但是如果要更改antd主題顏色的話，這裏這個style屬性值就不能是"css"了。必須改成true,原因是因爲值是css時按需加載時加載的就是antd編譯後之後的css文件，要更改主題顏色是要更改less變量的，而true標識直接加載antd的less文件，注意，坑來了！！當你設爲true時，你會發編譯失敗，頁面中antd組件也會沒有樣式了，命令行拋出如下異常：
這是因爲你還沒配置less-loader的配置項，在之前我複製修改的那個地方只是引入使用了less-loader,並沒有添加配置項，導致他就會出現這個異常，在網上找資料大概less的版本2.7.3以前不會出現這個問題，所以我們要先給less-loader一個修改antd主題顏色的配置，在create-react-app 2.0以前的配置方法：
在最新的react腳手架版本中，上面也提到了，因新版本的配置文件中關於css的rules中的use值被提到外部聲明成了一個配置函數，函數返回該樣式文件類型所需要的loader數組，所以經過我如下修改並測試，成功修改主題顏色：
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
];
if (preProcessor) {
let loader = require.resolve(preProcessor)
if (preProcessor === "less-loader") {
loader = {
loader,
options: {
modifyVars: {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
};
其實也就是修改了該函數if(preProcessor)中的代碼，其他地方並沒有改，當然dev和prod兩個文件同樣都要改，以保證線上代碼不會有問題，prod文件中這個if(preProcessor)中默認已經配置了一個options:
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
});
所以這個我們這樣改：
if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
}
if (preProcessor === "less-loader") {
loader.options.modifyVars = {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}
現在可以開始來快樂的擼你的 代碼咯。。。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
大家如果要學習webpack的一些常見配置方法或瞭解常見配置含義的話可以參考我之前的文章：