create-react-app+antd+less开发环境基础配置方法

Step1：使用create-react-app建立项目

1. yarn create react-app my-test-app

 

Step2：暴露webpack配置

1. 在my-test-app目录下执行：yarn eject  (无法启动的话，删除node_modules目录与yarn.lock后重新执行yarn)

2. 执行完毕后可以看到项目中多了一些文件夹，进入config目录可以找到webpack.config.js，即我们之后需要修改配置的文件。

 

Step3：配置less

1. 安装：yarn add less less-loader --save-dev

2. 打开webpack.config.js, 找到：

// style files regexes

.....

// 添加less解析规则

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

3. 在module -> rules中增加：

// Less 解析配置

{

test: lessRegex,

exclude: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 1,

sourceMap: isEnvProduction && shouldUseSourceMap,

},

'less-loader'

),

sideEffects: true,

},

{

test: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 1,

sourceMap: isEnvProduction && shouldUseSourceMap,

modules: true,

getLocalIdent: getCSSModuleLocalIdent,

},

'less-loader'

)

},

 

// 旧版如下*******************************************

2. 打开webpack.config.dev.js文件（prod文件与之类似）：

（找到如下代码段，并修改高亮处的代码）

（1）第一处（注意要按照style-loader，css-loader，postcss-loader，less-loader的顺序）

{

    test: /\.(css|less)$/,

    use: [

        require.resolve('style-loader'),

        {...},

        {

            loader: require.resolve('less-loader'),

        },

    ],

},

（2）第二处

{

    // Exclude `js` files to keep "css" loader working as it injects

    // its runtime that would otherwise processed through "file" loader.

    // Also exclude `html` and `json` extensions so they get processed

    // by webpacks internal loaders.

    exclude: [

        /\.(js|jsx|mjs)$/,

        /\.html$/,

        /\.json$/,

        /\.(css|less)$/,

    ],

    loader: require.resolve('file-loader'),

    options: {

         name: 'static/media/[name].[hash:8].[ext]',

    },

},

 

// ****************************************8

 

Step4：配置antd

1. 安装：

（1）yarn add  antd

（2）yarn add babel-plugin-import --dev

2. 增加.babelrc文件：

{

  "presets": [

    "react-app"

  ],

  "plugins": [

    [

      "import",

      {

        "libraryName": "antd",

        "style": "css"

      }

    ]

  ]

}

// 旧版*************************************88

2. 打开webpack.config.dev.js文件（prod文件与之类似）：

（找到如下代码段，并新增高亮处的代码）

// Process JS with Babel.

{

    test: /\.(js|jsx|mjs)$/,

    include: paths.appSrc,

    loader: require.resolve('babel-loader'),

    options: {

        plugins: [

            ['import', [{ libraryName: "antd", style: 'css' }]],

        ],

        // 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,

    },

},

 

// ****************************8

 

Step5：配置相对根路径

1、打开webpack.config.dev.js文件（prod文件与之类似）：

（找到如下代码段，并新增高亮处的代码）

alias: {

 

  // Support React Native Web

  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

  'react-native': 'react-native-web',

  '@': path.resolve(__dirname, '../src'),

},

转载于:https://www.cnblogs.com/jessicaDuan/p/9801177.html