vue源码的打包

vue源码打包

• 1.导入
  import { createApp } from "vue"
• 2.安装
  npm install vue@next
  ERROR in ./src/vue/App/vue 1:0 Module parse failed : Unexpected token错误时，在安装：
  npm install vue-loader -D
  并在webpack.config.js中配置(配置方法同其他的loader一样)
  继续安装：
  npm install @vue/compiler-sfc -D
  在webpack.config.js中继续配置：
  引入：
  const { VueLoaderPlugin } = require("vue-loader/dist/index")
  插件配置：
  new VueLoaderPlugin()

vue打包后不同的版本解析

• 1.vue.global.js
  • 通过浏览器的<script src="...">直接使用
  • 通过CDN引入和下载的Vue版本会暴露一个全局的Vue来使用
• 2.vue.esm-browser.js
  • 通过原生ES模块导入使用(浏览器中通过<script type="module">来使用)
• 3.vue.esm-bundle.js
  • 用于webpack，rollup和parcel等构建工具
  • 构建工具中默认的是vue,runtime.esm-bundle.js
  • 如果我们需要解析模板template，那么需要手动指定vue.esm-bundle.js
• 4.vue.cjs.js
  • 服务器端渲染使用
  • 通过requires()和node.js中使用

webpack-deb-server

• 安装
  npm install webpack-dev-server -D
• 配置

  devServer: {
    contentBase: "./build",
  }

  在package.json的script中

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

  使用npm run serve执行，就可以开启一个本地服务。

webpack-dev-server在编译之后不会写入到任何文件,而是将bundle文件保留在内存中

HMR(模块热替换)

Hot Module Replacement——模块热替换
模块热替换是指在 应用程序运行中，替换，添加，删除模块，而无需重新刷新整个界面

• 如何使用HMR？
  默认情况下，webpack-dev-server已经支持HMR，直接开启就是了

  target: "web",//hot的伴随设置 
  devServer: {
    hot: true
  }

• 指定使用HMR的模块
  if(module.hot) {
  module.hot.accept(“./util.js”, () => {
  console.log(“util更新了);
  })
  }

• 1.port设置监听端口，默认情况下时8080

• 2.open是否打开浏览器，默认时false

• 3.compress是否为静态文件开启gzip compression,默认时false

• 4.Proxy

  devServer: {
    contentBase: "./public",
    // 模块热替换HMR
    hot: true,
    host: "0.0.0.0",
    port: 8888,
    open: true, // 在package.json中配置--open
    compress: true, //压缩
    Proxy: {
      // 开启本地代理
      // 本地解决跨域的问题
      "/api": {
        target: "url",
        pathRewrite: {
          "^/api": ""
        },
        secure: false,// 不懂的文档去找，或者ppt
        changeOrigin: true
      },
    }
  },

extensions和alias配置

• extensions是解析到文件时自动添加扩展名
  默认值是[‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]
• alias是给某些常见的路径起一个别名

  resolve: {
    extensions: ['.jsx', '.ts', '.vue'],
    alias: {
      "js": path.resolve(__dirname, "./src/js"),
      "@": path.resolve(__dirname, "./sr")
    }
  }

  开发/生产环境的分离

  建立三个文件放在主文件夹下的config文件夹下，

  开发
  common
  生产

合并文件
npm install webpack-merge -D
在生产/开发的配置js文件中导入

const { merge } = require("webpack-merge");
const commenConfig = require('公共配置js文件的地址')

合并语法：

module.exports = merge(CommonConfig, {
  //生产/开发环境的部分配置。
  xxx: "",
  xxx: "",
  xxx: "",
  xxx: "",
})

同时在package.json的脚本里面也需要配置.
添加--config url