# kbone，让你的 H5 快速适配小程序

yarn add mp-webpack-plugin --dev
或者
npm install mp-webpack-plugin --save-dev

import Vue from "vue";
import App from "@/App";
import router from "@/router";
import store from "@/store";

// 需要将创建根组件实例的逻辑封装成方法
export default function createApp() {
  // 在小程序中如果要注入到 id 为 app 的 dom 节点上，需要主动创建
  const container = document.createElement("div");
  container.id = "app";
  document.body.appendChild(container);

  Vue.config.productionTip = false;

  return new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
}

module.exports = {
  // 页面 origin，默认是 https://miniprogram.default
  origin: "", // 填写项目中的图片资源地址，建议图片资源使用线上地址
  // 入口页面路由，默认是 /
  entry: "/",
  // 页面路由，用于页面间跳转
  router: {
    // 路由可以是多个值，支持动态路由
    index: [],
  },
  // 特殊路由跳转
  redirect: {
    // 跳转遇到同一个 origin 但是不在 router 里的页面时处理方式，支持的值：webview - 使用 web-view 组件打开；error - 抛出异常；none - 默认值；什么都不做，router 配置项中的 key
    notFound: "index",
    // 跳转到 origin 之外的页面时处理方式，值同 notFound
    accessDenied: "index",
  },
  // app 配置，同 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
  app: {
    navigationStyle: "custom", // 自定义navigation
  },
  // 全局配置
  global: {},
  // 页面配置，可以为单个页面做个性化处理，覆盖全局配置
  pages: {},
  // 优化
  optimization: {
    domSubTreeLevel: 5, // 将多少层级的 dom 子树作为一个自定义组件渲染，支持 1 - 5，默认值为 5

    // 对象复用，当页面被关闭时会回收对象，但是如果有地方保留有对象引用的话，注意要关闭此项，否则可能出问题
    elementMultiplexing: true, // element 节点复用
    textMultiplexing: true, // 文本节点复用
    commentMultiplexing: true, // 注释节点复用
    domExtendMultiplexing: true, // 节点相关对象复用，如 style、classList 对象等

    styleValueReduce: 5000, // 如果设置 style 属性时存在某个属性的值超过一定值，则进行删减
    attrValueReduce: 5000, // 如果设置 dom 属性时存在某个属性的值超过一定值，则进行删减
  },
  // 项目配置，会被合并到 project.config.json
  projectConfig: {
    appid: "", // 填写小程序的AppId
    projectname: "", // 填写小程序的项目名称
  },
  // 包配置，会被合并到 package.json
  packageConfig: {
    name: "", // 项目名称
    description: "", // 描述
    author: "", // 作者信息
  },
};

NODE_ENV = mp;

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const webpack = require("webpack");
const MpWebpackPlugin = require("mp-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  css: {
    extract: true,
  },
  outputDir: process.env.NODE_ENV === "mp" ? "./dist/mp/common" : "./dist/web",
  configureWebpack: {
    resolve: {
      extensions: ["*", ".js", ".vue", ".json"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src"),
      },
    },
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "mp") {
      config
        .devtool("node")

        .entry("app")
        .clear()
        .add("./src/main.mp.js")
        .end()

        .output.filename("[name].js")
        .library("createApp")
        .libraryExport("default")
        .libraryTarget("window")
        .end()

        .target("web")

        .optimization.runtimeChunk(false)
        .splitChunks({
          chunks: "all",
          minSize: 1000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 100,
          maxInitialRequests: 100,
          automaticNameDelimiter: "~",
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true,
            },
          },
        })
        .end()

        .plugins.delete("copy")
        .end()

        .plugin("define")
        .use(
          new webpack.DefinePlugin({
            "process.env.isMiniprogram": process.env.isMiniprogram, // 注入环境变量，用于业务代码判断
          })
        )
        .end()

        .plugin("extract-css")
        .use(
          new MiniCssExtractPlugin({
            filename: "[name].wxss",
            chunkFilename: "[name].wxss",
          })
        )
        .end()

        .plugin("mp-webpack")
        .use(new MpWebpackPlugin(require("./miniprogram.config.js")))
        .end();
    }
  },
};

# 开发
"mp-serve": "vue-cli-service build --watch --mode mp"
# 打包
"mp-build": "vue-cli-service build --mode mp"