深入浅出webpack之初体验

webpack是什么

webpack是一个静态的模块化打包工具,为现代的javascript应用程序

• 打包bundler:webpack可以帮助我们打包,所以他是一个打包工具

• 静态的static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到服务器)

• 模块化module:webpack默认支持各种模块化开发,ESModule CommonJS AMD等

• 现代的modern:我们前端说过,正是因为现代前端面临各种各样的问题,才催生了webpack的出现和发展
  

工作中常用的webpack

• proxy代理跨域
• 目录结构起别名
• sass,less预处理
• typescript支持
• 性能优化

webpack的依赖

• 首先我们需要安装nodejs,并且会同时安装npm

webpack的安装

• 目前webpack安装有两个webpack webpack-cli
• npm install webpack webpack-cli -g
• npm install webpack webpack-cli -D
• 它们是什么关系呢
  • 执行webpack命令,会执行node_modules下的.bin目录下的webpack
  • webpack执行时是要依赖webpack-cli的,如果没有安装则报错
  • 而webpack-cli代码执行时,才是真正利用webpack进行编译和打包的guocheng
  • 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架实际上是没有使用webpack-cli的,而是类似于自己的vue-service-cli的东西)

示例代码

https://gitee.com/weiLZ598/webpack-study.git