add css module compile rule and a login guard
Change-Id: I5c99e236f92d3b6c6d0060b36cf90a252df93a95
diff --git a/scripts/webpack.base.js b/scripts/webpack.base.js
index 0bd9084..aeb4b79 100644
--- a/scripts/webpack.base.js
+++ b/scripts/webpack.base.js
@@ -6,7 +6,9 @@
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const webpack = require('webpack');
const CircularDependencyPlugin = require('circular-dependency-plugin')
+const { isNamedExports } = require('typescript')
+const isDev = process.env.NODE_ENV === 'development' // 判断是否是开发环境
module.exports = {
entry: path.resolve(__dirname, '../src/index.tsx'),
@@ -69,12 +71,38 @@
generator: {
filename: 'assets/fonts/[name].[hash:8][ext]',
},
- },
-
- {
+ },
+ {
+ test: /\.module\.css$/,
+ use: [
+ isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+ {
+ loader: 'css-loader',
+ options: {
+ modules: {
+ namedExport: false,
+ localIdentName: isDev
+ ? '[name]__[local]__[hash:base64:5]'
+ : '[hash:base64:8]'
+ },
+ importLoaders: 1
+ },
+ },
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ plugins: ['postcss-preset-env'],
+ },
+ },
+ },
+ ],
+ },
+ {
test: /\.(css|less)$/,
+ exclude: /\.module\.css$/,
use: [
- MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin.loader 代替 style-loader
+ isDev?'style-loader':MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin.loader 代替 style-loader
'css-loader',
{
loader: 'postcss-loader',
@@ -88,9 +116,7 @@
},
'less-loader',
],
- // 排除 node_modules 目录
- exclude: /node_modules/,
- },
+ },
],
},
@@ -110,7 +136,8 @@
template:path.resolve(__dirname, '../public/index.html')
}),
new MiniCssExtractPlugin({
- filename: 'assets/css/[hash:8].css', // 将css单独提测出来放在assets/css 下
+ filename: 'assets/css/[name].[contenthash:8].css',
+ chunkFilename: 'assets/css/[id].[contenthash:8].css',
}),
new CircularDependencyPlugin({
exclude: /node_modules/,