快速入门Webpack

xw2327
926 阅读1分钟

1. 安装webpack模块 -D是当前文件夹下安装

image.png

2. 创建文件

image.png Index.js image.png image.png

3. 到webpack.config.js写代码

image.png

4. 到package.json里面配置脚本

image.png

5. 输出脚本

image.png

6. 这样就会生成一个dist文件

image.png 里面有 image.png

7. 引入这个打包好的文件就好了

image.png

image.png 但这样数会出现一个问题：当我们更改js里的文件时，打包好的数据不能实时跟新，我们就还得再去打包一次，这样很麻烦，这时候我们要借助一个模块webpack-dev-server来实时更新我们的文件 image.png

8. 再写一个脚本

image.png

9. 添加一个方法

image.png

10. 运行脚本

image.png

image.png 这两个就是得到的网址，是实时更新的 点进去是这样的

image.png

11. 这个时候我们去改index.js里的数据

image.png 这里会实时更新

image.png 如果觉得页面还需要引入<script src=”XXX”></script>麻烦，那还可以引入一个插件html-webpack-plugin

image.png 引入一下

image.png

12. 写代码

image.png 把dist下的index.html删除

image.png

13. 执行脚本dev

这样也能出来

image.png 也会帮你引好

image.png 并且Webpack也可以用插件把ES6代码转换成ES5代码，方便所有浏览器都兼容 首先得引入3个组件 @babel/core @babel/preset-env  babel-loader

14. 安装组件

image.png 可以在这里看到

image.png

15. 改一下index.js里的代码

ES代码

image.png 我们可以看到还是输出了的

image.png 我们也可以看到目前代码都是ES6的

image.png 这个时候我们就要引入插件去做操作转换了

16. 先创一个.babelrc文件

把那三个组件写在一个集合里

image.png

17. 写代码

image.png

18. 可以看到ES6的代码已经转换成ES5了

image.png 值也没有发生改变

image.png

avatar
文章
阅读
粉丝