webpack学习

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

webpack学习

二:webpack安装

安装准备:

1:安装node最新版本

2:安装npm

成功安装后可cmd查看,可以查看版本号则成功了第一步

webpack学习

全局安装:

cmd安装

webpack学习

这样安装一般都是最新版本 webpack 4+ 版本,你还需要安装 CLI

webpack学习


安装成功后cmd查看版本号

webpack学习

注意:全局安装只要电脑不发生问题,就无需多次安装,但是官方不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

本地安装:

要安装最新版本或特定版本,请运行以下命令之一:

webpack学习

如果你使用 webpack 4+ 版本,你依然还需要安装 CLI

webpack学习

对于大多数项目,我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。通常,webpack 通过运行一个或多个 npm scripts,会在本地 node_modules 目录中查找安装的 webpack:

webpack学习

当你在本地安装 webpack 后,你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

三:安装出现问题

1:配置警告:“模式”选项尚未设置,webpack将返回“生产”获取此值。将“mode”选项设置为“development”或“.”,以便为每个环境启用默认值。

webpack学习

解决方法:在package.json中配置下;

webpack学习

然后运行转换命令行=时后加上 --mode development

webpack学习

2:明明已经安装,却找不到webpack模块

webpack学习

解决方法:一般是路径错误,查看路径是否正确,反斜杠是否正确,还有本例中是webpack路径错误,应该是

webpack学习

3:文件代码引用模块找不到

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwxjg.html