vue ssr MiniCssExtractPlugin error webpack-contrib/mini-css-extract-plugin#90

justinxs · justinxs · commit b1cbcd88057d · 2021-12-22T18:19:05.000+08:00
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -5,121 +5,122 @@ const { VueLoaderPlugin } = require('vue-loader');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-module.exports = {
-    performance: {
-        // 资源文件最大限制大小warning提示 1000kb
-        maxAssetSize: 1000 * 1024,
-        maxEntrypointSize: 1000 * 1024,
-    },
-    output: {
-        filename: '[name].[chunkhash].js',
-        chunkFilename: '[name].[chunkhash].js',
-        path: path.resolve(__dirname, '../dist'),
-        publicPath: '',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader'
-            },
-            {
-                test: /\.m?js$/,
-                loader: 'babel-loader',
-                exclude: file => {
-                    return /node_modules/.test(file)
-                }
-            },
-            {
-                test: /\.s?css$/i,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            publicPath: '../'
-                        }
-                    },
-                    {
-                        loader: "css-loader",
-                        options: { importLoaders: 1 },
-                    },
-                    {
-                        loader: "postcss-loader",
-                        options: {
-                            postcssOptions: {
-                                plugins: [
-                                    [
-                                        "autoprefixer",
-                                        {
-                                            // Options
-                                        },
+module.exports = platform => {
+    return {
+        performance: {
+            // 资源文件最大限制大小warning提示 1000kb
+            maxAssetSize: 1000 * 1024,
+            maxEntrypointSize: 1000 * 1024,
+        },
+        output: {
+            filename: '[name].[chunkhash].js',
+            chunkFilename: '[name].[chunkhash].js',
+            path: path.resolve(__dirname, '../dist'),
+            publicPath: '',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: {
+                        extractCSS: true
+                    }
+                },
+                {
+                    test: /\.m?js$/,
+                    loader: 'babel-loader',
+                    exclude: file => {
+                        return /node_modules/.test(file)
+                    }
+                },
+                {
+                    test: /\.s?css$/i,
+                    use: [
+                        platform == 'server' ? {
+                            loader: 'null-loader'
+                        } : {
+                            loader: MiniCssExtractPlugin.loader,
+                            options: {
+                                publicPath: '../'
+                            }
+                        },
+                        {
+                            loader: "css-loader",
+                            options: { importLoaders: 1 },
+                        },
+                        {
+                            loader: "postcss-loader",
+                            options: {
+                                postcssOptions: {
+                                    plugins: [
+                                        [
+                                            "autoprefixer",
+                                            {
+                                                // Options
+                                            },
+                                        ],
                                     ],
-                                ],
+                                },
                             },
                         },
+                        'sass-loader'
+                    ],
+                },
+                {
+                    test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
+                    // asset 自动地在 asset/resource 和 asset/inline 之间进行选择, 默认size < 8kb 实行asset/inline
+                    type: 'asset',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 4 * 1024 // 4kb
+                        }
+                    },
+                    generator: {
+                        filename: 'images/[name].[hash][ext]',
                     },
-                    'sass-loader'
-                ],
-            },
-            {
-                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
-                // asset 自动地在 asset/resource 和 asset/inline 之间进行选择, 默认size < 8kb 实行asset/inline
-                type: 'asset',
-                parser: {
-                    dataUrlCondition: {
-                        maxSize: 4 * 1024 // 4kb
-                    }
                 },
-                generator: {
-                    filename: 'images/[name].[hash][ext]',
+                {
+                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                    // asset 自动地在 asset/resource 和 asset/inline 之间进行选择, 默认size < 8kb 实行asset/inline
+                    type: 'asset',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 4 * 1024 // 4kb
+                        }
+                    },
+                    generator: {
+                        filename: 'fonts/[name].[hash][ext]',
+                    },
                 },
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|otf)$/i,
-                // asset 自动地在 asset/resource 和 asset/inline 之间进行选择, 默认size < 8kb 实行asset/inline
-                type: 'asset',
-                parser: {
-                    dataUrlCondition: {
-                        maxSize: 4 * 1024 // 4kb
+            ],
+        },
+        plugins: [
+            new CopyWebpackPlugin({
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, '../static'), 
+                        to: path.resolve(__dirname, '../dist'),
+                        noErrorOnMissing: true
                     }
-                },
-                generator: {
-                    filename: 'fonts/[name].[hash][ext]',
-                },
-            },
+                ]
+            }),
+            new ESLintPlugin(),
+            new VueLoaderPlugin(),
+            // 注入webpack编译时js中的全局变量
+            new webpack.DefinePlugin({
+                'process.env.THEME': JSON.stringify(process.env.THEME)
+            })
         ],
-    },
-    plugins: [
-        new CopyWebpackPlugin({
-            patterns: [
-                {
-                    from: path.resolve(__dirname, '../static'), 
-                    to: path.resolve(__dirname, '../dist'),
-                    noErrorOnMissing: true
-                }
-            ]
-        }),
-        new ESLintPlugin(),
-        new VueLoaderPlugin(),
-        // 提取style生成 css文件
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].[contenthash:8].css',
-            chunkFilename: 'css/[id][contenthash:8].css',
-            ignoreOrder: true
-        }),
-        // 注入webpack编译时js中的全局变量
-        new webpack.DefinePlugin({
-            'process.env.THEME': JSON.stringify(process.env.THEME)
-        })
-    ],
-    resolve: {
-        // 路径别名以及文件默认查找后缀数组
-		alias: {
-			'@': path.resolve(__dirname, '../src'),
-			'@styles': path.resolve(__dirname, '../src/styles'),
-			'@images': path.resolve(__dirname, '../src/images'),
-			'@theme': path.resolve(__dirname, `../src/styles/themes/${process.env.THEME}.scss`)
-		},
-		extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue', '.json'],
-	}
+        resolve: {
+            // 路径别名以及文件默认查找后缀数组
+            alias: {
+                '@': path.resolve(__dirname, '../src'),
+                '@styles': path.resolve(__dirname, '../src/styles'),
+                '@images': path.resolve(__dirname, '../src/images'),
+                '@theme': path.resolve(__dirname, `../src/styles/themes/${process.env.THEME}.scss`)
+            },
+            extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue', '.json'],
+        }
+    };
 };
diff --git a/build/webpack.client.conf.js b/build/webpack.client.conf.js
@@ -1,9 +1,10 @@
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
-const baseConfig = require('./webpack.base.conf.js');
+const baseConfig = require('./webpack.base.conf.js')('client');
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = (env) => {
     const isProd = env.NODE_ENV === 'production';
@@ -39,6 +40,12 @@ module.exports = (env) => {
         mode: env.NODE_ENV,
         entry: './src/entry-client.js',
         plugins: [
+            // 提取style生成 css文件
+            new MiniCssExtractPlugin({
+                filename: 'css/[name].[contenthash:8].css',
+                chunkFilename: 'css/[id][contenthash:8].css',
+                ignoreOrder: true
+            }),
             new webpack.DefinePlugin({
                 'process.env.VUE_ENV': '"client"'
             }),
diff --git a/build/webpack.server.conf.js b/build/webpack.server.conf.js
@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const nodeExternals = require('webpack-node-externals');
-const baseConfig = require('./webpack.base.conf.js');
+const baseConfig = require('./webpack.base.conf.js')('server');
 const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
 
 module.exports = (env) => {
@@ -26,12 +26,12 @@ module.exports = (env) => {
         // https://github.com/liady/webpack-node-externals
         // 外置化应用程序依赖模块。可以使服务器构建速度更快，
         // 并生成较小的 bundle 文件。
-        externals: nodeExternals({
+        externals: [nodeExternals({
             // 不要外置化 webpack 需要处理的依赖模块。
             // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
             // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
-            allowlist: /\.css$/
-        }),
+            allowlist: [/\.s?css$/, /\?vue&type=style/]
+        })],
     
         // 这是将服务器的整个输出
         // 构建为单个 JSON 文件的插件。
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "koa-static-cache": "^5.1.4",
     "log4js": "^6.3.0",
     "lru-cache": "^6.0.0",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.3",
     "vue-server-renderer": "^2.6.14",
@@ -52,6 +53,7 @@
     "eslint-webpack-plugin": "^3.1.1",
     "mini-css-extract-plugin": "^2.4.5",
     "nodemon": "^2.0.15",
+    "null-loader": "^4.0.1",
     "ora": "^6.0.1",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
diff --git a/src/entry-client.js b/src/entry-client.js
@@ -1,4 +1,8 @@
 import { createApp } from './app';
+import NProgress from 'nprogress'; // progress bar
+import 'nprogress/nprogress.css'; // progress bar style
+
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
 // 客户端特定引导逻辑……
 
@@ -55,6 +59,8 @@ router.beforeEach((to, from, next) => {
     const whiteList = store.state.whiteList;
     const loginName = store.state.loginName;
 
+    NProgress.start();
+
     if (to.path !== '/login' && !loginName) {
         if (!whiteList.includes(to.path)) {
             return next(`/login?redirect=${to.fullPath}`);
@@ -91,4 +97,9 @@ router.beforeEach((to, from, next) => {
             });
         }
     });
+});
+
+router.afterEach(() => {
+    console.log(NProgress);
+    NProgress.done(); // finish progress bar
 });
diff --git a/src/views/Home.vue b/src/views/Home.vue
