在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)。