css 中使用webpack别名(alias)

Posted 2023-04-19

参考技术A

在webpack中配置的别名(alias),也就是常用路径索引，在js文件中可以直接使用。举例来说:

在js中可以直接使用：

在css中是通过 css-loader 来完成别名路径的替换

webpack 之 resolve.alias(别名)

module.exports = {
    entry: ‘./src/main.js‘,
    output: {
        path: path.resolve(__dirname, ‘./dist‘),
        publicPath: ‘/dist/‘,
        filename: ‘build.js‘
    },
    module: {
        rules: [ ]
    },
    resolve: {

　　　　 extensions: [".js", ".json"]   //自动解决某些扩展

        alias: {
            ‘vue$‘: ‘vue/dist/vue.esm.js‘,
            ‘components$‘: path.resolve(__dirname, ‘src/components/‘)
        }
    }

}

import Header from ‘components/Header.js‘

这样我们引用一个指定文件时就不用再向以前那样写很长的路径了

自动解决某些扩展。默认为：

extensions: [".js", ".json"]

导入时可以让用户离开扩展程序：

import Header from ‘components/Header‘