webpack入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

在 Webpack 中使用别名

模块别名定义,方便后续直接引用别名,无须多写长长的地址,比如我们现在想要把scripts/jquery.min.jsjquery压缩文件打包.

别名(resolve.alias) 是 Webpack 的一个配置项,它的作用是把用户的一个请求重定向到另一个路径,例如通过修改 webpack.config.js 配置文件,jquery为别名加入:

resolve: {
  alias: {
      jquery: "./scripts/jquery.min.js"
  }
}

例如我们之前不用别名,在entry.js中,想要把jquery打包

require('./scripts/jquery.min.js');

设置别名,就可以修改为

require('jquery');

这样待打包的脚本中的 require('jquery'); 其实就等价于 require('./scripts/jquery.min.js'); 。通过别名的使用在本例中可以减少几乎一半的时间。