webpack | 青训营笔记

57 阅读1分钟

这是我参与「第五届青训营 」笔记创作活动的第13天。

入口文件

默认值是./src/index.js,通过这个文件来构建一个依赖图,我们可以通过webpack.config.js这个文件来配置入口文件位置

  entry: './path/to/my/entry/file.js',
};
复制代码

详细配置格式规范:www.webpackjs.com/concepts/en…

输出

主要是根据依赖图的关系把各种模块整合成一个文件,输出,默认为./dist/main.js,也可以通过配置文件修改

详细配置格式:www.webpackjs.com/concepts/ou…

loader

加载器,也就是加载模块的时候,指定的一些规则,规范,从而方便导入,建立依赖图

参考链接:www.webpackjs.com/concepts/lo…

插件

loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建一个插件实例。

参考链接:www.webpackjs.com/api/plugins

模式

通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

参考链接:www.webpackjs.com/configurati…

兼容和环境

Webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。

Webpack 5 运行于 Node.js v10.13.0+ 的版本。