vue基础 — webpack

1.webpack-概念

场景

开发完项目, 可以用node+webpack来分析, 翻译, 压缩, 打包, 加快浏览器打开速度

概念

webpack官网

• 现代 javascript 应用程序的 静态模块打包器 (module bundler)

  • 静态: 文件资源
  • 模块: node环境, 引入文件, 遵守模块化语法

• 除了合并代码, 还可以翻译和压缩代码

  • less/sass -> css
  • ES6/7/8 -> ES5
  • html/css/js -> 压缩合并

小结

答案

• 静态模块打包器
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

2.webpack-使用前-准备

软件

webpack依赖Node环境

npm或yarn等模块管理工具

步骤

1. 创建文件夹

2. 初始化包环境

   yarn init
   

3. 安装依赖包

   yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
   

4. 在package.json中, 配置scripts(自定义命令)

   scripts: {
   	"build": "webpack"
   }
   

小结

使用webpack前, 准备什么?

答案

• Node环境软件
• npm或yarn模块管理器
• 项目文件夹和包环境
• 下载webpack并配置命令

3.webpack-基础使用

• 先下载安装webpack, 配置打包命令
• 默认入口src/index.js-要被打包的文件, 要引入到这里使用
• 输入yarn build打包命令(实际是项目环境webpack命令)
• 输出代码到dist/main.js中

4.webpack-配置修改

目标

修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js

步骤

配置文档

1. 项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
2. 填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

3. 修改代码里src/index.js 为 src/main.js
4. 重新打包观察输出文件名字

图示流程

1. 敲击命令, 代码执行过程

2. 代码源文件和webpack之间关系图

   源码一定要和入口产生直接/间接引入关系, 才会被一起打包

5.webpack-开发服务器

场景

开发时, 快速自动打包查看效果

原因

1. 构建入口和所有模块依赖关系图
2. 磁盘读取对应的文件到内存, 才能加载
3. 用对应的 loader 进行处理和翻译
4. 将处理完的内容, 输出到磁盘指定文件内
5. 以后代码变化, 从1重新开始

处理步骤

webpack-dev-server文档

1. 构建入口和所有模块依赖关系图
2. 磁盘读取对应的文件到内存, 才能加载
3. 用对应的 loader 进行处理和翻译
4. 将处理完的内容, 输出到内存里而非磁盘上
5. 以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

执行步骤

1. 下载包

   yarn add webpack-dev-server@3.11.2 -D
   

2. 配置自定义命令serve

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

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

   yarn serve
   #或者 npm run serve
   

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

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

7.webpack-开发服务器-配置

目标

查找文档, 修改开发服务器配置

步骤

webpack-dev-server配置文档

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

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

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

8.webpack-项目打包发布

项目做完了, 要上线怎么办

步骤

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

   所有代码, 被整合打包

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

   开发环境的代码不用发