Webpack - 模块

概念

在模块化编程中，开发者将程序分解成功能离散的 chunk，并称为模块。
每个模块都有小于完整程序的体积，使得验证、调试、测试变得轻而易举。node.js从一开始就支持模块化编程，但是浏览器的模块化在缓慢支持中，在浏览器界存在着多种支持 JS模块化 的工具，这些工具各有优势和限制。webpack从这些系统中吸取了经验和教训，并将 模块 的概念应用到项目的任何文件中。

模块

• esmodule 的 import 语句
• CommonJS 的 require 语句
• AMD 的 define 和 require 语句
• css/less/sass 文件中的 @import 语句
• style 文件中的 url(…) 的图片链接

• HTML 文件中的 的图片链接

  支持的模块类型

  webpack 天生支持如下模块类型

• ECMAScript 模块

• CommonJS 模块
• AMD 模块
• Assets

• WebAssembly 模块

  通过loader可以支持的模块

• CoffeeScript

• TypeScript
• ESNext
• Sass
• Less
• Stylus
• ELm

  模块解析

  通过内置的 enhanced-resolve，wenpack 能解析三种文件路径

  绝对路径

  import '/src/xxx/math.js';

  相对路径

  import './math.js';

  模块路径

  如果我们的层次很深，我们引用一个文件可能就是这样import '../../../../../math.js'显然不友好。我们可以通过配置别名的方式来替换引入模块路径。

  const path = require('path')
  resolve: {
    alias: {
        '@': path.resolve(__dirname, './src') // key 为别名，value 为绝对路径
    }
  }

  这样我们每次使用 @ 就可以访问到 ./src 下面了