按需打包技术 ui库使用

按需打包

　　在编译阶段：需要什么资源，打包什么资源

　　react提供了一个按需打包插件 babel-plugin-import

　　在babel的配置options.plugins中配置该插件

　　是一个数组，每一个成员代表一个插件

　　　　　　成员： 字符串 直接引入

　　　　　　成员： 数组 第一个成员代表插件名称 第二个成员代表插件配置

　　　　　　　　　librayName 按需打包模块 style按需打包的样式文件类型

　　　　　　注:一旦使用按需打包的技术，样式就不再需要手动引入

以ant design UI框架为例

import { Button , ... } from ’antd-mobile‘

module.exports = {
    mode: 'development',
    // mode: 'production',
    entry: './modules/main.js',
    output: {
        filename: 'main.js'
    },
    module: {
        rules: [
            // jsx
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/env', '@babel/react'],
                    // 插件
                    plugins: [
                        // 按需打包
                        ['import', {
                            libraryName: 'antd-mobile',
                            style: 'css'
                        }]
                    ]
                }
            },
            // css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}