Webpack打包Vue,搭建服务器以及使用Babel转化代码(八)

734 阅读14分钟

1.Babel

Babal平时开发感知不强,但是对于前端开发是不可缺少的一部分

我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的

Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的 JavaScript,包括:语法转换、源代码转换等

1.1.Babel命令行使用

babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用

如果我们希望在命令行尝试使用babel,需要安装如下库:

  • @babel/core:babel的核心代码,必须安装
  • @babel/cli:可以让我们在命令行使用babel
npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码:

  • src:是源文件的目录
  • --out-dir:指定要输出的文件夹dist
npx babel src --out-dir dist

1.2.插件的使用

比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件:

npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果:我们会发现 const 并没有转成 var

这是因为 plugin-transform-arrow-functions,并没有提供这样的功能,我们需要使用 plugin-transform-block-scoping 来完成这样的功能

npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
,@babel/plugin-transform-arrow-functions

1.3.Babel的预设preset

如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset)

安装@babel/preset-env预设: npm install @babel/preset-env -D

执行命令: npx babel src --out-dir dist --presets=@babel/preset-env

1.4.Babel底层编译器执行原理

babel实际就是一个编译器

Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码

Babel也拥有编译器的工作流程:

  • 解析阶段(Parsing)
  • 转换阶段(Transformation)
  • 生成阶段(Code Generation)

Babel的执行阶段:

image-20220130154153725

当然上面简化版的编译器工具流程,在每个阶段又会有自己具体的工作

1.5.babel-loader

通常开发中我们可能会通过Webpack配置loader对其进行使用

安装相关依赖:npm install babel-loader @babel/core

设置一个规则,在加载js文件时,使用我们的babel:

image-20220130154718917

1.6.babel-preset

上面配置loader可能需要管理大量的插件

我们可以直接给webpack提供一个 preset

webpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel

比如常见的预设有三个:

  • env
  • react
  • TypeScript

安装preset-env:npm install @babel/preset-env

配置对应preset:

image-20220130155117798

1.7.Babel的配置文件

我们可以将babel的配置信息放到一个独立的文件中,babel给我们提供了两种配置文件的编写

  1. babel.config.json(或者.js,.cjs,.mjs)文件,可以直接作用于Monorepos项目的子包,更加推荐
  2. .babelrc.json(或者.babelrc,.js,.cjs,.mjs)文件,早期使用较多的配置方式,但是对于配置Monorepos项目是比较麻烦的
image-20220130155535181

2.Webpack打包Vue

引入Vue:npm install vue@next

那如果我们用上面的代码打包Vue会发生什么呢?

image-20220130164219417

界面不会有效果,并且控制台会出现警告信息

image-20220130164516689

2.1.Vue打包后不同版本解析

vue(.runtime).global(.prod).js:

  • 通过浏览器中的 <script src = ""> 直接使用
  • 我们之前通过CDN引入和下载的Vue版本就是这个版本
  • 会暴露一个全局的Vue来使用

vue(.runtime).esm-browser(.prod).js:

  • 用于通过原生 ES 模块导入使用(在浏览器中通过 <script type="module">

vue(.runtime).esm-bundler.js:

  • 用于 webpack,rollup 和 parcel 等构建工具
  • 构建工具中默认是vue.runtime.esm-bundler.js
  • 如果我们需要解析模板template,那么需要手动指定vue.esm-bundler.js

vue.cjs(.prod).js:

  • 服务器端渲染使用
  • 通过require()在Node.js中使用

运行时+编译器 vs 仅运行时

Vue会有三种方式编写DOM元素

  1. template模板的方式(之前经常使用的方式)
  2. 通过.vue文件中的template来编写模板
  3. render函数的方式,使用h函数来编写渲染的内容
  • 方式一和二中都需要特定的代码来对其进行解析

    • 方式一中template我们必须要通过源码中一部分代码来进行编译

    • 方式二中vue文件中的template可以通过在vue-loader对其进行编译和处理

  • 方式三中通过h函数可以直接返回一个虚拟节点,也就是Vnode节点;

Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时

  • 运行时+编译器包含了对template模板的编译代码,更加完整,但是也更大一些
  • 仅运行时没有包含对template版本的编译代码,相对更小一些

2.2.VSCode对SFC文件的支持

真实开发中我们都是使用SFC( single-file components (单文件组件) )

VSCode对SFC的支持:

  1. Vetur,从Vue2开发就一直在使用的VSCode支持Vue的插件
  2. Volar,官方推荐的插件

2.3.编写SFC文件

image-20220130170437232 image-20220130170501116

打包的时候会出错

我们需要合适的loader来帮助我们处理文件

我们安装vue-loader:

npm install vue-loader -D

并在webpack的模板规则中进行配置:

image-20220130170634134

并且我还需要添加@vue/compiler-sfc来对template进行解析

npm install @vue/compiler-sfc -D
image-20220130170937739

重新打包即可支持.vue文件的写法

全局标识的配置

控制台依然会有一个警告

image-20220130172630022

这是两个特性的标识,一个是使用Vue的Options,一个是Production模式下是否支持devtools工具

虽然他们都有默认值,但是强烈建议我们手动对他们进行配置

image-20220130172714023

3.搭建本地服务器

目前运行代码的操作

  1. npm run build,编译相关的代码
  2. 通过live server或者直接通过浏览器,打开index.html代码,查看效果

但是这个操作比较琐碎,我们希望可以做到,当文件发生变化时,可以自动的完成编译和展示

为了完成自动编译,webpack提供了几种可选的方式

  • webpack watch mode
  • webpack-dev-server(常用)
  • webpack-dev-middleware

3.1.Webpack watch

webpack给我们提供了watch模式:

  • 在该模式下,webpack依赖图中的所有文件,只要有一个发生了更新,那么代码将被重新编译
  • 而且我们不需要手动去运行 npm run build指令了

开启watch的两种方式:

  1. 在导出的配置中,添加 watch: true
  2. 在启动webpack的命令中,添加 --watch的标识

在package.json的 scripts 中添加一个 watch 的脚本:

image-20220130171846189

也可也在webpack.config.js配置

image-20220130173532502

3.2.webpack-dev-server

上面的方式可以监听文件变化,但是不能自动刷新浏览器

我们可以使用webpack-dev-server

安装:npm install webpack-dev-server -D

image-20220130181321871

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中开启了express服务端让浏览器读取资源,内部使用memfs的库

image-20220130180119853

image-20220130232751370

模块热替换(HMR)

HMR的全称是Hot Module Replacement,翻译为模块热替换

模块热替换是指在 应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个页面

HMR通过如下几种方式,来提高开发的速度:

  • 不重新加载整个页面,只更新需要变化的内容,这样可以保留某些应用程序的状态不丢失,提高刷新速度
  • 修改了css、js源代码,会立即在浏览器更新,相当于直接在浏览器的devtools中直接修改样式

默认webpack-dev-server已经支持HMR,我们只需要开启即可

在不开启HMR的情况下,当我们修改了源代码之后,整个页面会自动刷新,使用的是live reloading

开启HMR

修改webpack的配置:

image-20220130181405471

我们还需要去指定哪些模块发生更新使用HMR,不然依然会刷新整个页面

image-20220130181513641
框架的HMR

当我们如开发Vue、React项目,我们修改了组件,希望进行热更新,会向上面一样去写入 module.hot.accpet相关的API呢?

实际Vue开发中我们使用vue-loader,此loader支持vue组件的HMR,提供开箱即用的体验

react开发中,有react-refresh,实时调整react组件

HMR的原理

HMR如何做到只更新指定模板的内容的呢?

webpack-dev-server会创建两个服务:提供静态资源的服务(express)和Socket服务(net.Socket)

express server负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)

HMR Socket Server,是一个socket的长连接:

  • 长连接有一个最好的好处是建立连接后双方可以通信(服务器可以直接发送文件到客户端)
  • 当服务器监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update chunk)
  • 通过长连接,可以直接将这两个文件主动发送给客户端(浏览器)
  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新

image-20220130182704009

hotOnly、host配置

host设置主机地址默认是localhost

localhost:本质上是一个域名,通常情况下会被解析成127.0.0.1

如果希望其他地方也可以访问,可以设置为 0.0.0.0

localhost(127.0.0.1) 和 0.0.0.0 的区别:

  • 127.0.0.1:回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收
    • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
    • 而回环地址,是在网络层直接就被获取到了,是不会经常数据链路层和物理层的
    • 比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的
  • 0.0.0.0:监听IPV4上所有的地址,再根据端口找到不同的应用程序
    • 比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的
image-20220130185013658

port、open、compress

port设置监听的端口,默认情况下是8080

open是否打开浏览器,默认为false,设置true自动打开浏览器,也可以设置Google Chrome等值

compress是否为静态文件开启gzip compression,默认值是false,可以设置为true

image-20220130192313288

3.3. vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制,详情见:cli.vuejs.org/zh

3.4.脚手架Proxy代理

proxy是我们开发中非常常用的一个配置选项,它的目的设置代理来解决跨域访问的问题

那么我们可以将请求先发送到一个代理服务器,代理服务器和API服务器本身是没有跨域的问题

我们可以进行如下的设置:

  • target:表示的是代理到的目标地址,比如 /api会被代理到 http://localhost:8888/api/abc
  • pathRewrite:默认情况下,我们的/api也会被写入到URL中,如果希望删除,可以使用pathRewrite
  • secure:默认情况下不接收转发到https的服务器上,如果希望支持,可以设置为false
  • changeOrigin:它表示是否更新代理后请求的headers中host地址

方法一

在vue.config.js中添加如下配置:

devServer:{
  proxy:"http://localhost:5000"
}

说明:

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可
  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源

方法二:

编写vue.config.js配置具体代理规则:

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
   changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
   changeOrigin默认值为true
*/

说明:

  1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
  2. 缺点:配置略微繁琐,请求资源时必须加前缀

3.5.historyApiFallback

historyApiFallback是开发中一个非常常见的属性,它主要的作用是解决SPA页面在路由跳转之后,进行页面刷新 时,返回404的错误

默认是false,如果设置为true,那么在刷新时,返回404错误时,会自动返回 index.html 的内容

如果是 object 类型的值,可以配置rewrites属性中from来匹配路径,决定要跳转到哪一个页面

事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的

可以查看connect-history-api-fallback 文档

image-20220130213239290

3.6.resolve模块解析

在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库

resolve可以帮助webpack从每个 require/import 语句中,找到需要引入到合适的模块代码

webpack 使用 enhanced-resolve来解析文件路径

webpack能解析三种文件路径:

  • 绝对路径
    • 由于已经获得文件的绝对路径,因此不需要再做进一步解析
  • 相对路径
    • 在这种情况下,使用 import 或 require 的资源文件所处的目录,被认为是上下文目录
    • 在 import/require 中给定的相对路径,会拼接此上下文路径,来生成模块的绝对路径
  • 模块路径
    • 在 resolve属性里有modules中指定的所有目录检索模块,默认值是 ['node_modules'],所以默认会从node_modules中查找文件
    • 我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置

确实文件还是文件夹

如果是一个文件:

  • 如果文件具有扩展名,则直接打包文件
  • 否则,将使用 resolve里面的extensions选项作为文件扩展名解析

如果是一个文件夹

  • 会在文件夹中根据 resolve里面的mainFiles配置选项中指定的文件顺序查找
    • resolve.mainFiles的默认值是 ['index']
    • 再根据 resolve.extensions来解析扩展名

3.7.extensions和alias配置

extensions是解析到文件时自动添加扩展名

  • 默认值是 ['.wasm', '.mjs', '.js', '.json']
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时,我们必须自己写上扩展名

alias可以配置别名

  • 当我们项目的目录结构比较深的时候,或者一个文件的路径可能需要 ../../../这种路径片段
  • 我们可以给某些常见的路径起一个别名

image-20220130211750287

3.8.区分开发环境和生产环境

之前所有webpack配置都是放在webpack.config.js文件

其实某些配置是在开发环境需要使用的,某些配置是在生成环境需要使用的

我们可以对其配置区分,方便维护管理

package.json文件中添加命令区分开发和生产加载不同的文件

image-20220130233040259

然后我们可以创建三个文件,还需要npm install webpack-merge -D合并配置

  • webpack.comm.config.js
  • webpack.dev.config.js
  • webpack.prod.config.js
// webpack.comm.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require("vue-loader/dist/index");

module.exports = {
  target: "web",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "js/bundle.js",
  },
  resolve: {
    extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
    alias: {
      "@": path.resolve(__dirname, "../src"),
      js: path.resolve(__dirname, "../src/js"),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]",
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "哈哈哈哈",
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
    new VueLoaderPlugin(),
  ],
};
// webpack.dev.config.js
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comm.config");

module.exports = merge(commonConfig, {
  mode: "development",
  devtool: "source-map",
  devServer: {
    contentBase: "./public",
    hot: true,
    // host: "0.0.0.0",
    port: 7777,
    open: true,
    // compress: true,
    proxy: {
      "/api": {
        target: "http://localhost:8888",
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
        changeOrigin: true,
      },
    },
  },
});
// webpack.prod.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comm.config");

module.exports = merge(commonConfig, {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "./public",
          globOptions: {
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],
});

入口文件解析

我们之前编写入口文件的规则是这样的:./src/index.js,但是如果我们的配置文件所在的位置变成了 config 目录,我们是否应该变成 ../src/index.js呢?

依然要写成 ./src/index.js,这是因为入口文件其实是和另一个属性context有关

ontext的作用是用于解析入口(entry point)和加载器(loader)

  • 默认应该是webpack的启动目录

我们也可以在配置中传入值

image-20220130233349913