feat：文件配置

zxl7 · Apr 13, 2022 · 6d34fe3 · 6d34fe3
1 parent 3bd214a
commit 6d34fe3
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 76 deletions.
diff --git a/Vue Code/vue-ssr/build/webpack.base.config.js b/Vue Code/vue-ssr/build/webpack.base.config.js
@@ -1,38 +1,38 @@
 /**
  * 公共配置
  */
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const path = require('path')
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
-const resolve = file => path.resolve(__dirname, file)
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const path = require("path");
+const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
+const resolve = (file) => path.resolve(__dirname, file);
 
-const isProd = process.env.NODE_ENV === 'production'
+const isProd = process.env.NODE_ENV === "production";
 
 module.exports = {
-  mode: isProd ? 'production' : 'development',
+  mode: isProd ? "production" : "development",
   output: {
-    path: resolve('../dist/'),
-    publicPath: '/dist/',
-    filename: '[name].[chunkhash].js'
+    path: resolve("../dist/"),
+    publicPath: "/dist/",
+    filename: "[name].[chunkhash].js",
   },
   resolve: {
     alias: {
       // 路径别名，@ 指向 src
-      '@': resolve('../src/')
+      "@": resolve("../src/"),
     },
     // 可以省略的扩展名
     // 当省略扩展名的时候，按照从前往后的顺序依次解析
-    extensions: ['.js', '.vue', '.json']
+    extensions: [".js", ".vue", ".json"],
   },
-  devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',
+  devtool: isProd ? "source-map" : "cheap-module-eval-source-map",
   module: {
     rules: [
       // 处理图片资源
       {
         test: /\.(png|jpg|gif)$/i,
         use: [
           {
-            loader: 'url-loader',
+            loader: "url-loader",
             options: {
               limit: 8192,
             },
@@ -43,28 +43,23 @@ module.exports = {
       // 处理字体资源
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
-        use: [
-          'file-loader',
-        ],
+        use: ["file-loader"],
       },
 
       // 处理 .vue 资源
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: "vue-loader",
       },
 
       // 处理 CSS 资源
       // 它会应用到普通的 `.css` 文件
       // 以及 `.vue` 文件中的 `<style>` 块
       {
         test: /\.css$/,
-        use: [
-          'vue-style-loader',
-          'css-loader'
-        ]
+        use: ["vue-style-loader", "css-loader"],
       },
-      
+
       // CSS 预处理器，参考：https://vue-loader.vuejs.org/zh/guide/pre-processors.html
       // 例如处理 Less 资源
       // {
@@ -75,10 +70,7 @@ module.exports = {
       //     'less-loader'
       //   ]
       // },
-    ]
+    ],
   },
-  plugins: [
-    new VueLoaderPlugin(),
-    new FriendlyErrorsWebpackPlugin()
-  ]
-}
+  plugins: [new VueLoaderPlugin(), new FriendlyErrorsWebpackPlugin()],
+};
diff --git a/Vue Code/vue-ssr/build/webpack.client.config.js b/Vue Code/vue-ssr/build/webpack.client.config.js
@@ -1,13 +1,13 @@
 /**
  * 客户端打包配置
  */
-const { merge } = require('webpack-merge')
-const baseConfig = require('./webpack.base.config.js')
-const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+const { merge } = require("webpack-merge");
+const baseConfig = require("./webpack.base.config.js");
+const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
 
 module.exports = merge(baseConfig, {
   entry: {
-    app: './src/entry-client.js'
+    app: "./src/entry-client.js",
   },
 
   module: {
@@ -17,28 +17,28 @@ module.exports = merge(baseConfig, {
         test: /\.m?js$/,
         exclude: /(node_modules|bower_components)/,
         use: {
-          loader: 'babel-loader',
+          loader: "babel-loader",
           options: {
-            presets: ['@babel/preset-env'],
+            presets: ["@babel/preset-env"],
             cacheDirectory: true,
-            plugins: ['@babel/plugin-transform-runtime']
-          }
-        }
+            plugins: ["@babel/plugin-transform-runtime"],
+          },
+        },
       },
-    ]
+    ],
   },
 
   // 重要信息：这将 webpack 运行时分离到一个引导 chunk 中，
   // 以便可以在之后正确注入异步 chunk。
   optimization: {
     splitChunks: {
       name: "manifest",
-      minChunks: Infinity
-    }
+      minChunks: Infinity,
+    },
   },
 
   plugins: [
     // 此插件在输出目录中生成 `vue-ssr-client-manifest.json`。
-    new VueSSRClientPlugin()
-  ]
-})
+    new VueSSRClientPlugin(),
+  ],
+});
diff --git a/Vue Code/vue-ssr/build/webpack.server.config.js b/Vue Code/vue-ssr/build/webpack.server.config.js
@@ -1,35 +1,37 @@
 /**
  * 服务端打包配置
  */
-const { merge } = require('webpack-merge')
-const nodeExternals = require('webpack-node-externals')
-const baseConfig = require('./webpack.base.config.js')
-const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
+const { merge } = require("webpack-merge");
+const nodeExternals = require("webpack-node-externals");
+const baseConfig = require("./webpack.base.config.js");
+const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
 
 module.exports = merge(baseConfig, {
   // 将 entry 指向应用程序的 server entry 文件
-  entry: './src/entry-server.js',
+  entry: "./src/entry-server.js",
 
   // 这允许 webpack 以 Node 适用方式处理模块加载
   // 并且还会在编译 Vue 组件时，
   // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
-  target: 'node',
+  target: "node",
 
   output: {
-    filename: 'server-bundle.js',
+    filename: "server-bundle.js",
     // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
-    libraryTarget: 'commonjs2'
+    libraryTarget: "commonjs2",
   },
 
   // 不打包 node_modules 第三方包，而是保留 require 方式直接加载
-  externals: [nodeExternals({
-    // 白名单中的资源依然正常打包
-    allowlist: [/\.css$/]
-  })],
+  externals: [
+    nodeExternals({
+      // 白名单中的资源依然正常打包
+      allowlist: [/\.css$/],
+    }),
+  ],
 
   plugins: [
     // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
     // 默认文件名为 `vue-ssr-server-bundle.json`
-    new VueSSRServerPlugin()
-  ]
-})
+    new VueSSRServerPlugin(),
+  ],
+});
diff --git a/Vue Code/vue-ssr/src/entry-client.js b/Vue Code/vue-ssr/src/entry-client.js
@@ -1,16 +1,16 @@
 /**
  * 客户端入口
  */
-import { createApp } from './app'
+import { createApp } from "./app";
 
 // 客户端特定引导逻辑……
 
-const { app, router, store } = createApp()
+const { app, router, store } = createApp();
 
 if (window.__INITIAL_STATE__) {
-  store.replaceState(window.__INITIAL_STATE__)
+  store.replaceState(window.__INITIAL_STATE__);
 }
 
 router.onReady(() => {
-  app.$mount('#app')
-})
+  app.$mount("#app");
+});
diff --git a/Vue Code/vue-ssr/src/entry-server.js b/Vue Code/vue-ssr/src/entry-server.js
@@ -1,28 +1,28 @@
 // entry-server.js
-import { createApp } from './app'
+import { createApp } from "./app";
 
-export default async context => {
+export default async (context) => {
   // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
-    // 以便服务器能够等待所有的内容在渲染前，
-    // 就已经准备就绪。
-  const { app, router, store } = createApp()
+  // 以便服务器能够等待所有的内容在渲染前，
+  // 就已经准备就绪。
+  const { app, router, store } = createApp();
 
-  const meta = app.$meta()
+  const meta = app.$meta();
 
   // 设置服务器端 router 的位置
-  router.push(context.url)
+  router.push(context.url);
 
-  context.meta = meta
+  context.meta = meta;
 
   // 等到 router 将可能的异步组件和钩子函数解析完
-  await new Promise(router.onReady.bind(router))
+  await new Promise(router.onReady.bind(router));
 
   context.rendered = () => {
     // Renderer 会把 context.state 数据对象内联到页面模板中
     // 最终发送给客户端的页面中会包含一段脚本：window.__INITIAL_STATE__ = context.state
     // 客户端就要把页面中的 window.__INITIAL_STATE__ 拿出来填充到客户端 store 容器中
-    context.state = store.state
-  }
+    context.state = store.state;
+  };
 
-  return app
-}
+  return app;
+};