webpack 模块(Module)-FunTeaLearn Online Web Tutorials

webpack 模块(Module)

在Webpack中，模块是指应用程序的不同部分，例如JavaScript文件、样式表、图片等。Webpack通过模块的概念来管理应用程序的代码，并将它们打包成一个或多个bundle。

模块的引入

在Webpack中，模块可以通过require或import语句来引入。例如：

// 使用require引入模块
const module1 = require('./module1');

// 使用import引入模块
import module2 from './module2';

模块可以通过module.exports或export语句来导出。例如：

// 使用module.exports导出模块
module.exports = {
  foo: 'bar'
};

// 使用export导出模块
export const foo = 'bar';

Webpack支持将应用程序的代码分割成多个模块，以实现按需加载。这可以通过import()函数来实现。例如：

// 按需加载模块
import('./module3').then(module => {
  console.log(module);
});

Webpack会根据配置文件中的resolve字段来解析模块的路径。可以配置文件类型、别名等。例如：

// 配置文件中的resolve字段
resolve: {
  extensions: ['.js', '.json'],
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

以上就是Webpack模块的基本概念和用法，下一节将介绍Webpack的插件(Plugin)。

Feed
back