Skip to content

Commit

Permalink
vue ssr MiniCssExtractPlugin error webpack-contrib/mini-css-extract-p…
Browse files Browse the repository at this point in the history 
…lugin#90
  • Loading branch information
@justinxs
justinxs committed Dec 22, 2021
1 parent ef2fdce commit b1cbcd8
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 116 deletions.
219 changes: 110 additions & 109 deletions build/webpack.base.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
}
};
};
9 changes: 8 additions & 1 deletion build/webpack.client.conf.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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"'
}),
Expand Down
8 changes: 4 additions & 4 deletions build/webpack.server.conf.js
View file
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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 文件的插件。
Expand Down
48 changes: 48 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions src/entry-client.js
View file
Original file line number Diff line number Diff line change
@@ -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

// 客户端特定引导逻辑……

Expand Down Expand Up @@ -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}`);
Expand Down Expand Up @@ -91,4 +97,9 @@ router.beforeEach((to, from, next) => {
});
}
});
});

router.afterEach(() => {
console.log(NProgress);
NProgress.done(); // finish progress bar
});
Loading

0 comments on commit b1cbcd8

Please sign in to comment.