webpack-开发服务器和总结

webpack-开发服务器

1. 下载包

   yarn add webpack-dev-server -D
   npm i webpack-dev-server -D
   

2. 配置自定义命令serve

   scripts: {
   	"build": "webpack",
   	"serve": "webpack serve"
   }
   

3. 运行命令-启动webpack开发服务器

   yarn serve
   #或者 npm run serve
   

4. 启动一个web服务器和端口, 在浏览器访问查看

效果: 以后改src下的代码, 自动打包更新到浏览器上

webpack-开发服务器-配置

1. webpack.config.js中添加服务器配置

   module.exports = {
       // ...其他配置
       devServer: {
         port: 3000, // 端口号
         open: true // 启动后自动打开浏览器
       }
   }
   

2. 重启开发服务器观察效果即可

webpack-项目打包发布

1. 修改mode选项(选一个)

   module.exports = {
       // ...其他配置
       mode: 'development' // 开发环境-> 不会极致压缩, 一般开发服务器默认使用这个属性
   }
   

   module.exports = {
       // ...其他配置
   	mode: 'production'  // 生产环境-> 会极致压缩, 一般上线npm run build会自动采用这个模式
   }
   

2. 执行之前的yarn build产生dist目录

   所有代码, 被整合打包

3. 把dist目录交给后台/运维, 部署给客户使用即可

   开发环境的代码不用发

今日总结

• 什么是webpack

  静态模块资源打包工具, 打包我们编写的代码, 翻译, 整合, 分析, 压缩等功能

• yarn的作用?

  替代npm在nodejs环境的包管理器, 速度要比npm好

  // 拿到新项目, 缺少node_modules, 执行命令下包, 根据package.json记录的哪些包下载
  yarn
  
  // 安装某个包
  yarn add 包名
  

• webpack构建的流程是什么

  执行打包命令, 寻找配置文件, 找到入口, 建立依赖关系图, 用插件加载器翻译处理编写的文件, 打包输出到指定位置

• 说出webpack的作用, 加载器和插件的作用即可

  webpack在node环境下使用

  可以对任何模块, 翻译, 压缩, 打包

  加载器给webpack带来识别功能类型文件的能力

  插件是给webpack带来更多的功能

• 前端为何能用yarn下的包

  因为webpack翻译后输出到js, 再插入到html中运行

• 以后开发时, 使用webpack还是webpack-dev-server?

  使用webpack-dev-server启动的服务器, 只打包更新的代码, 还提供地址让浏览器访问打包后代码

  项目开发完成, 使用webpack打包生成dist部署给服务器, 让客户使用