什么是 Webpack？
Webpack 是一个前端静态资源打包工具，可以将多个 JavaScript、CSS、图片等静态资源打包成一个或多个文件，并且可以针对不同的环境（如开发环境和生产环境）生成不同的输出文件。
使用 Webpack 可以使前端工程化更加高效，也能够大幅度提升代码的可维护性和性能。Webpack 的核心理念是 “一切皆模块”，它可以将各个模块文件打包成一个或多个 JavaScript 文件。
Webpack 解析 ES6 模块引用
在 ES6 中，可以使用 import 关键字引入其他 JavaScript 模块。例如：
import { foo } from './bar.js';Webpack 可以通过解析 import 引入的模块并打包到最终的 JavaScript 文件中。
但是，在浏览器环境下，ES6 模块引用不能直接使用，因此，Webpack 会将其转换成 CommonJS 格式。
如果需要支持 ES6 模块语法，并且在浏览器环境下直接可以使用，可以使用 @babel/preset-env 来将 ES6 模块转换成 CommonJS 模块。
在 webpack.config.js 文件中配置如下：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-- ---
-Webpack 解析 CommonJS 模块引用
除了 ES6 模块语法外，还可以使用 CommonJS 模块语法来引用其他模块。例如：
const foo = require('./bar.js');Webpack 也可以解析 CommonJS 模块引用，并打包到最终的 JavaScript 文件中，使其可以在浏览器环境下使用。
需要注意的是，与 ES6 模块不同，CommonJS 模块语法不支持动态引入（Dynamic Import）。如果需要使用动态引入，则需要使用 import() 方法。
Webpack 也可以解析 import() 方法引入的动态模块，并打包到最终的 JavaScript 文件中。但是，需要配置 output.chunkFilename 选项来设置动态打包出的文件名。
例如：
// ...
output: {
filename: 'bundle.js',
chunkFilename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
// ...在异步加载模块时，Webpack 可以根据指定的 chunkFilename 规则生成动态的 chunk 文件名。
总结
Webpack 是一个优秀的前端工程化打包工具，可以将不同的静态资源打包成一个或多个文件，提高前端开发效率和项目可维护性。在使用 Webpack 打包时，需要注意设置相应的模块引入解析规则，以使打包后的代码能够在浏览器环境下正常运行。
以上是关于 Webpack 解析 ES6 和 CommonJS 模块引用的详细说明，希望本篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1d547b5eee0b52592a0da