webpack配置别名和全局变量（resolve.alias&& ProvidePlugin）

有时候我们在项目中会需要频繁引入同一个路径的文件，如果需要引入的次数特别多，我们就得在每一次引入都要写一长串的地址，那么我们有没有什么方法可以偷点懒呢，我们可以通过调整webpack里的配置达到“偷一点小懒”的目的。

resolve.alias这个配置项相当于为文件目录配置一个别名
1
使用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作为一个全局变量来使用