zoukankan      html  css  js  c++  java
  • antd-iconfont for inner network

    npm install antd-iconfont --save

    npm install less less-loader --save-dev

    webpack.config.js

    const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = {
        entry: './src/app.jsx',
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'js/app.js'
        },
        module: {
            rules: [
                {
                    test: /.js[x]?$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env', 'react'],
                            plugins: [
                                [
                                    "import",
                                    [
                                        {
                                            "libraryName": "antd",
                                            "style": true
                                        }
                                    ]
                                ]
                            ]
                        }
                    }
                },
                {
                    test: /.css$/,
                    loader: ExtractTextPlugin.extract({
                        use: "css-loader",
                        fallback: "style-loader"
                    })
                },
                {
                    test: /.scss$/,
                    loader: ExtractTextPlugin.extract({
                        use: 'css-loader!sass-loader',
                        fallback: 'style-loader'
                    })
                },
                {
                    test: /.less$/,
                    loader: ExtractTextPlugin.extract({
                        use: [{
                            loader: 'css-loader'
                        }, {
                            loader: 'less-loader',
                            options: {
                                javascriptEnabled: true,
                                modifyVars: {
                                    '@icon-url': '"~antd-iconfont/iconfont"',
                                }
                            }
                        }],
                        fallback: 'style-loader'
                    })
                },
                {
                    test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            name: '[path][name].[ext]',
                            limit: 2000
                        }
                    }]
                }
            ]
        },
        resolve: {
            alias: {
                node_modules: path.join(__dirname, '/node_modules'),
                util: path.join(__dirname, '/src/util'),
                component: path.join(__dirname, '/src/component'),
                service: path.join(__dirname, '/src/service'),
                page: path.join(__dirname, '/src/page'),
                styles: path.join(__dirname, '/src/styles')
            }
        },
        devServer: {
            port: '8088', //设置端口号
                          // 路径的配置
            historyApiFallback: {
                index: '/dist/index.html'
            },
            proxy: {
                '/manage': {
                    target: 'http://test.happymmall.com/',
                    changeOrigin: true
                },
                '/user/logout.do': {
                    target: 'http://test.happymmall.com/',
                    changeOrigin: true
                },
                '/react-api/*': {
                    target: 'http://localhost:3000',
                    secure: false
                }
            }
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                filename: 'js/base.js'
            }),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: 'index.html',
                favicon: './favicon.ico'
            }),
            new ExtractTextPlugin("[name].css"),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            })
        ]
    };

    1、

    plugins: [
                                [
                                    "import",
                                    [
                                        {
                                            "libraryName": "antd",
                                            "style": true
                                        }
                                    ]
                                ]
                            ]

    2、

    {
                    test: /.less$/,
                    loader: ExtractTextPlugin.extract({
                        use: [{
                            loader: 'css-loader'
                        }, {
                            loader: 'less-loader',
                            options: {
                                javascriptEnabled: true,
                                modifyVars: {
                                    '@icon-url': '"~antd-iconfont/iconfont"',
                                }
                            }
                        }],
                        fallback: 'style-loader'
                    })
                }

    import "~antd-iconfont/iconfont.less";

    import "antd-them_override.less";

  • 相关阅读:
    Js获取时间,当前,一周前,一月前的时间,时间戳转换,时间格式化,日期格式化
    echarts图随窗口大小的变化而变化
    Vue中使用Google地图插件
    element el-progress渐变色进度条
    Vue中使用mixins
    CSS3 使用 calc() 计算高度 vh px
    element-ui饿了么框架中导航菜单中箭头方向问题
    Vue中使用QRcode.js生成二维码---qrcodejs2
    鼠标经过时显示样式的两种方法
    element 按钮样式:确认按钮发布后样式发生改变
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/8619424.html
Copyright © 2011-2022 走看看