经过几天的折腾,终于找到webpack大哥的家门了,实属不易。
附上在我看来最棒的一篇指导文章:http://www.css88.com/archives/9436
本文作者仍然是一个尚不入流的小菜鸟,如有错误,还请各位指出指导我一下。
好了,我们开始正文。
自webpack4开始,不再需要配置文件(但loader仍需要webpack.config.js文件的配置),但其仍然是高度可配置的,鉴于install环节没有什么问题,因此我就不再将安装命令堆叠于此,直接上重点。
一、webpack4不在需要配置 entry point与output file
entry point文件默认为./src/index.js
output file文件默认为./dist/main.js
二、关于production(生产)模式与development(开发)模式
深入的原理我还不明白,只能给大家总结一下表象,但如果此处如果不配置,终端会不断的warn你到头大,虽然不影响什么,但我一行也不想看见。
1、设置为development mode,速度很快,但提供的是未经压缩的bundle。
2、若设置为production mode,打包后提供的是压缩后的bundle,另外还有一些优点,但我都看不懂,所以就不班门弄斧了,大家如果想看,就在为开头附的那篇文章中。
(设置为production:此处出现的错误影响了webpack-dev-server的热更新,我已经专门写了一篇小文,https://blog.csdn.net/qq_39989929/article/details/83657155)
3、配置mode有两种方式,一种是写在webpack.config.js中
但鉴于webpack4主打零配置文件,我们还可以将其写在npm scripts中
//此图片转载于顶部附着文章
三、覆盖默认entry point与output file
1、若想要自定义入口文件等,仍然可以在webpack.config.js中配置
2第二种方式,仍是将其写在npm scripts中
//此图片转载于顶部附着文章
最后,感谢前辈们提供的图片。
未完待续......