webpack的使用

最新推荐文章于 2023-12-24 21:20:52 发布

原创最新推荐文章于 2023-12-24 21:20:52 发布 · 129 阅读

CC 4.0 BY-SA版权

全局安装webpack的方法

cnpm i webpack -g

安装到项目中去的方法是

cnpm i webpack --save-dev

在这里插入图片描述

借助jq，需要先给项目安装一个jq包，这里需要初始化
在这里插入图片描述

package.json就是管理你本地安装的npm包，用于定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。一个package.json文件可以做如下事情：

展示项目所依赖的npm包
允许你指定一个包的版本[范围]
让你建立起稳定，意味着你可以更好的与其他开发者共享

在这里插入图片描述

webpack配置入口出口文件

在这里插入图片描述

配置好后，只需要执行webpack就可以对入口js进行编译，只要每次更改js，就需要直接执行webpack命令就可以了

我们每次修改js查看样式，都会要执行一遍webpack命令，这样很麻烦，有没有方便的办法，修改以后，就自动刷新页面呢？而不需要执行命令webpack

需要安装一个插件

 cnpm i webpack-dev-server  -D

在这里插入图片描述

在这里插入图片描述

通过上面的 npm run dev 命令就可以运行安装的插件

上面的方法，把bundle.js放进了内存中去，这样更快的修改及查看，我们还能不能把。html文件也放入到内存中去，这样可以更快的查看呢？

在这里插入图片描述

如何让webpack可以编译css文件？

在这里插入图片描述

css文件里面的url，webpack不能处理，也是需要安装插件

在这里插入图片描述

bootstrap的使用

在这里插入图片描述

babel的配置安装（webpack里面有不少es6 es7的高级语法，webpack不能识别，所以需要安装babel来转译）

在这里插入图片描述

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

即使安装了还是会报一个错。经过各种测试，发现是插件版本不兼容
解决办法，就是删除你的node_modules。把你的package.json对应的插件版本修改如下

 "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",

然后再次重新安装 cnpm i ~~~ 这样就可以啦

在这里插入图片描述

复习webpack配置的流程

在这里插入图片描述

注意：

在这里插入图片描述

VS CODE 结束指令的快捷键为 ctrl+C