author:aei
webpack5的一个详细配置,并持续更新中,里面的每一句话都几乎做了注释,很适合想要入门webpack5的同学学习
作用:
- 使用了label,可以让转换ES6语法
- 使用了Less插件
- 加入了mini-css-extract-plugin插件,让CSS导入变成链接式的
- 处理了CSS在不同浏览器上的兼容性
- 支持js,html,css,less,ts等
- 打包图片资源(包括打包了html中的src下的图片,CSS引用的url里的图片和js引用的图片等)
- dev serve 的搭建和热替换,一键加载,HTML不可以自动刷新,需要手动刷新一下(已知BUG)
- 去除死代码
- 默认为开发模式,在webpack.config.js中更改mode为production,代码将压缩
具体使用方法:
- npm install
- webpack 或 webpack serve(启动服务器)
导入的文件目录结构:src目录下有css,html,js,img等目录,分别放置css和less,html,js,图片等文件,注意html文件里放的是html模板。
tips:默认需要一个index.html,index.js。
生成的目录为dist目录
配置文件为webpack.onfig.js文件,相关部分已经做好了注释