webpack初体验

今天看了webpack的一个youtube课程,对webpack有个很初级的感觉。webpack就是一个make工具。

webpack需要node环境,建好目录后,先用npm init -y,初始化package.json文件。然后安装webpack , webpack-dev-server。

这时候就可以开始配置webpack.config.js,这就所谓前端workflow。webpack.config.js里面有几个是比较重要的配置项(也是这个对象的属性)。

entry:入口点,这个就是类似于int main()一样,其他文件都是通过引用获得

output:输出文件,就是最后打包好的文件配置,webpack会把所有js变成一个js

module:这里面会描述各种rule,其实就是对不同文件进行一次处理,这样可以把ES6的文件变成ES65,scss文件变成css文件等等。

plugin:有一些额外的操作需要通过插件来完成。

文件配置好之后,还需要到npm的package.json里面配置命令,好让webpack运行。webpack打包所需要的依赖包,也需要npm install来安装。

这个过程很像当初写Makefile。有个合理的目录规划,然后写个makefile文件,在makefile中需要引入各种.a库,设置好各种目录,然后make,生成可执行文件到bin中。只不过以前都是生成二进制的文件,现在都是文本文件,但是这些文本文件压缩以后,也和二进制文件差不多了。以前也会写各种shell脚本来执行打包、单元测试、发布等等的工作,只不过好像不需要这么多的依赖。也就没有什么模块化、包管理。

整个前端的发展越来越独立,像PHP这样的项目可能就会变成仅仅是返回json数据。我还是不能明白webpack这样的工具怎么和PHP结合,怎么实现所谓的前端工程化。不过无所谓,对于我来说,技术能用就好,我的目标不是成为技术大牛,如果真有一天需要上百人做一个项目的时候,那有的是钱去请一些高级大牛来做架构。

Demo