webpack3 muse-ui单组件引入

最新推荐文章于 2024-03-20 09:39:21 发布

qq_41617272

最新推荐文章于 2024-03-20 09:39:21 发布

阅读量1.3k

点赞数

文章标签： webpack muse-ui

本文链接：https://blog.csdn.net/qq_41617272/article/details/80257036

版权

本文将介绍如何在Webpack3配置中，针对Muse-UI库进行按需引入，以减少项目体积。主要内容包括main.js的设置、utils.js的使用以及webpack.base.config.js的配置细节，通过参考链接提供的教程实现单组件导入。

摘要由CSDN通过智能技术生成

1.main.js

import 'muse-components/styles/base.less'

2.utils.js


 const museUiThemePath = path.join(
    __dirname,
    '..',
    'node_modules',
    'muse-ui',
    'src/styles/themes/variables/default.less'
    )

     return {
            css: generateLoaders(),
            postcss: generateLoaders(),
            less: generateLoaders('less', {
                globalVars: {
                    museUiTheme: `'${museUiThemePath}'`
                }
            }),
            sass: generateLoaders('sass', { indentedSyntax: true }),
            scss: generateLoaders('sass'),
            stylus: generateLoaders('stylus'),
            styl: generateLoaders('stylus')
        }

3 webpack.base.config.js

       alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            '@img': resolve('src/assets/img'),
            'muse-components': 'muse-ui/src'
        } 

        {
            test: /muse-ui.src.*?js$/,
            loader: 'babel-loader'
        }

        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'src': path.resolve(__dirname, '../src'),
            'assets': path.resolve(__dirname, '../src/assets'),
            'components': path.resolve(__dirname, '../src/components'),
            'muse-components': 'muse-ui/src'
            }
        },