Skip to content

webpack antd配置

yezihaohao edited this page Feb 10, 2018 · 2 revisions

关于antd在项目中的配置:

webpack.config.dev.js & webpack.config.prod.js两个配置文件增加相同的配置

rules中增加配置按需引入antd组件:

      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
            +plugins: [
            +    ['import', [{ libraryName: 'antd', style: true }]]
            +],
          cacheDirectory: true,
        },
      }

增加编译less文件配置:

          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                  loader: 'css-loader',
                  options: {
                      importLoaders: 1
                  },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                      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: {
                      
                    },
              }
            ]
          }

注意:安装相应的插件包:npm i less less-loader babel-plugin-import --dev 或者 yarn add less less-loader babel-plugin-import --dev