有时候我们在项目中会需要频繁引入同一个路径的文件,如果需要引入的次数特别多,我们就得在每一次引入都要写一长串的地址,那么我们有没有什么方法可以偷点懒呢,我们可以通过调整webpack里的配置达到“偷一点小懒”的目的。
resolve.alias这个配置项相当于为文件目录配置一个别名
使用resolve.alias配置的用法如下
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
resolve:{
//配置别名,在项目中可缩减引用路径
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
'&': resolve('src/components'),
'api': resolve('src/api'),
'assets': resolve('src/assets')
}
},
plugins: [
]
};
这样配置后在使用的时候就可以直接
import http from '@/utils/http'
代替
import http from 'src/utils/http'
reslove.alias可以让我们不用重复的去写一长串的路径,但是在使用的时候还是得引入,如果我们连引入都懒得引入呢?webpack为我们提供了ProvidePlugin这个帮我们解决问题的插件
那么ProvidePlugin要怎么使用呢?
webpack.config.js
const webpack = require('webpack')
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
resolve:{
//配置别名,在项目中可缩减引用路径
alias: {
}
},
plugins: [
//提供全局的变量,在模块中使用无需用require引入
new webpack.ProvidePlugin({
$config: [resolve(`src/data/config/${process.env.CONFIG_ENV}.env.js`), 'default'],
}),
]
};
使用的时候就可以寄直接将 $config作为一个全局变量来使用