配置模块别名扩展名

jiezi

5 年前

给模块配置扩展名，导入时即可省略文件后缀，webpack 将自动完成查找。
给模块或目录配置别名，即可在导入时避免书写冗长的引入路径，如：import $ from 'utils/zepto.min'；某个自己写的通用插件，配置别名为 xx 后，即可：import xx from 'xx'。

示例代码

const paths = require('./paths')

module.exports = {
  ...
  resolve: {
    // 配置模块扩展名
    extensions: ['.js', '.json', '.css', '.less', '.art'],
    // 配置模块别名或目录别名
    alias: {
      src: paths.appSrc,
      components: paths.appComponents, // 将路径放到 path.js 里统一管理，更加推荐
      xx: path.resolve(__dirname, 'src/lib/xx.js'), // 给某个模块配置别名
    },
  },
  ...
}

配置模块别名、扩展名