webpack resolve.alias ProvidePlugin externals

resolve.alias这个配置项相当于为文件目录配置一个别名

比如下面这样的目录结构

要在main.js中使用jquery,需要这样var $=require("./lib/jquery")。如果lib中的库很多，而且目录也很多，使用的时候就要写一长串的地址。

使用resolve.alias配置如下


module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      jquery: "./lib/jquery"
    }
  },
  plugins: [
   
  ]
};

使用的时候，这样就可以var $=require("jquery");
配置项中，key值得配置方式也有很多种，更多的可以看这里

resolve.alias使我们不用频繁地写一长串的引用路径，但是使用的时候还是先要require，如果我们懒到require都不想写呢？ProvidePlugin这个插件就派上用场了。

webpack.config.js

var webpack=require("webpack");
module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      jquery: "./lib/jquery"
    }
  },
  plugins: [
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
      $: "jquery"
    }),
  ]
};

因为已经配置的别名，所以

new webpack.ProvidePlugin({ $: "jquery" })

就可以，jquery就是我们配置的别名，如果没有配置别名，则要这样写

new webpack.ProvidePlugin({ $: "./lib/jquery" })

使用的时候

var arr=[1,2,3,4];
$.each(arr,function(){
    console.log(this);
});

没毛病，但是如果没有配置ProvidePlugin，也没有require,这样写webpack打包的时候是不会报错的，浏览器运行的时候才知道错误。

不管是使用resolve.alias还是ProvidePlugin，打包的时候，webpack都会将使用到的库进行打包。打包的方式可以使用CommonsChunkPlugin这个插件再进行配置（我以前的文章中有写这个插件的详细用法）。如果我们不想webpack打包某个文件，而是直接在页面使用script标签手动引入，或者使用CDN资源的时候，externals这个配置项就起作用了。

webpack.config.js


module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  externals: { $: "window.jQuery" },
  plugins: [

  ]
};

使用

var $ = require("$");
var arr=[1,2,3,4];
$.each(arr,function(){
    console.log(this);
});

一定要记得require,不然和不配置externals没区别，不想写可以使用ProvidePlugin

externals: { $: "window.jQuery" },
  plugins: [
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
      $: "$"
    })
  ]

打包后

然后页面上通过script标签手动引入CDN地址或者本地文件地址就行了，需要注意的是引入的顺序和依赖关系，将webpack打包的文件放到后面引入。

其实不使用externals也是可以的，我们看一下不使用externals，直接这样写

var arr=[1,2,3,4];
$.each(arr,function(){
    console.log(this);
});

打包后

当我们手动引入JQ后，$肯定是有的，没毛病。但始终感觉这样会给自己挖坑。

webpack resolve.alias ProvidePlugin externals

推荐阅读更多精彩内容