chore: improve layout and style rule

aotuzuche · Sep 27, 2020 · 6f54571 · 6f54571
1 parent 65cfb6e
commit 6f54571
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 65 deletions.
diff --git a/bin/lib/getEnvs.js b/bin/lib/getEnvs.js
@@ -1,4 +1,4 @@
-module.exports = () => {
+module.exports = (config = {}) => {
   const raw = Object.keys(process.env)
     .filter(key => /^AT_/i.test(key))
     .reduce(
@@ -15,7 +15,7 @@ module.exports = () => {
   const stringified = Object.keys(raw).reduce((env, key) => {
     env[`process.env.${key}`] = JSON.stringify(raw[key])
     return env
-  }, {})
+  }, config)
 
   return stringified
 }
diff --git a/bin/webpack/baseConfig.js b/bin/webpack/baseConfig.js
@@ -12,11 +12,29 @@ const getEnvs = require('../lib/getEnvs')
 const config = require('../config')
 const resolveEntry = require('../lib/resolveEntry')
 
-const isDev = process.env.NODE_ENV === 'development'
-const { APP_CONFIG } = config
-const deps = require(resolveProjectPath('package.json')).dependencies
-
 const getBaseConfig = async () => {
+  const isDev = process.env.NODE_ENV === 'development'
+  const { APP_CONFIG } = config
+  const deps = require(resolveProjectPath('package.json')).dependencies
+
+  const styleRules = [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: {
+        hmr: isDev,
+      },
+    },
+    {
+      loader: 'css-loader',
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: { plugins: [require('autoprefixer')()] },
+      },
+    },
+  ]
+
   let webpackConfig = {
     mode: process.env.NODE_ENV,
 
@@ -77,62 +95,15 @@ const getBaseConfig = async () => {
         },
         {
           test: /\.css$/,
-          use: [
-            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                importLoaders: 1,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: { plugins: [require('autoprefixer')()] },
-              },
-            },
-          ],
+          use: styleRules,
         },
         {
           test: /\.mcss$/,
-          use: [
-            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                importLoaders: 2,
-                modules: {
-                  localIdentName: '[local]_[hash:base64:6]',
-                },
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: { plugins: [require('autoprefixer')()] },
-              },
-            },
-            'sass-loader',
-          ],
+          use: [...styleRules, 'sass-loader'],
         },
         {
           test: /\.scss$/,
-          use: [
-            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                importLoaders: 2,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: { plugins: [require('autoprefixer')()] },
-              },
-            },
-            'sass-loader',
-          ],
+          use: [...styleRules, 'sass-loader'],
         },
       ],
     },
@@ -158,6 +129,7 @@ const getBaseConfig = async () => {
       // 提取公共样式
       new MiniCssExtractPlugin({
         filename: isDev ? 'css/[name].css' : 'css/[name].[contenthash:7].css',
+        chunkFilename: isDev ? 'css/[id].css' : 'css/[id].[contenthash:7].css',
         ignoreOrder: true,
       }),
 
@@ -173,9 +145,9 @@ const getBaseConfig = async () => {
       // 注册服务
       new ModuleFederationPlugin({
         name: APP_CONFIG.syscode,
-        library: { type: 'var', name: APP_CONFIG.syscode },
+        // library: { type: 'var', name: APP_CONFIG.syscode },
         remotes: {
-          layout: `layout@/${APP_CONFIG.target}system/layout/remoteEntry.js`,
+          layout: `layout@${isDev ? APP_CONFIG.target : '/'}system/layout/remoteEntry.js`,
         },
         filename: 'remoteEntry.js',
         exposes: {
@@ -218,8 +190,8 @@ const getBaseConfig = async () => {
     resolveLoader: {
       modules: [
         'node_modules',
-        resolveProjectPath('node_modules'),
         resolveAutosPath('node_modules'),
+        resolveProjectPath('node_modules'),
       ],
     },
     // cache: {

diff --git a/bin/webpack/prodConfig.js b/bin/webpack/prodConfig.js
@@ -12,6 +12,7 @@ module.exports = async function getProdConfig(options) {
   return merge(baseConfig, {
     devtool: config[process.env.PACKAGE].productionSourceMap ? 'cheap-module-source-map' : false,
     optimization: {
+      realContentHash: true,
       minimizer: [
         new OptimizeCSSAssetsPlugin({
           cssProcessorOptions: {
@@ -62,13 +63,16 @@ module.exports = async function getProdConfig(options) {
       ],
     },
     plugins: [
-      // 启用范围提升，用于改进包的体积
       new webpack.optimize.ModuleConcatenationPlugin(),
+
+      new webpack.optimize.MinChunkSizePlugin({
+        minChunkSize: 10000, // Minimum number of characters
+      }),
     ],
 
     output: {
       path: config[process.env.PACKAGE].assetsRoot,
-      filename: assetsPath('js/[name].[chunkhash].js'),
+      filename: assetsPath('js/[name].[contenthash].js'),
       chunkFilename: assetsPath('js/[name].[chunkhash].js'),
       publicPath: config[process.env.PACKAGE].assetsPublicPath,
     },

diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^9.0.1",
     "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^4.5.0",
     "inquirer": "^7.3.3",
     "latest-version": "^5.1.0",
     "metalsmith": "^2.3.0",
@@ -77,16 +77,16 @@
     "react-refresh": "^0.8.3",
     "readline": "^1.3.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.10",
+    "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
     "source-map-url": "^0.4.0",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^4.2.2",
     "thread-loader": "^3.0.0",
-    "ts-loader": "^8.0.3",
+    "ts-loader": "^8.0.4",
     "url-loader": "^4.1.0",
     "webpack": "^5.0.0-rc.0",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.1.4"