akfun 3.3.0 → 3.3.2

package/README.md

@@ -388,7 +388,44 @@ module.exports = {
 }
 ```
 
-16. 本地开启https服务
+16. 自定义css-loader的配置
+> 比如用于启用/禁用 @import 解析。
+```bash
+module.exports = {
+  ...
+  webpack: {
+    ...
+    cssLoaderOption: {
+      import: false, // 启用/禁用 @import 解析
+    }
+  }
+  ...
+}
+```
+
+17. 自定义postcss-loader的配置
+> 比如用于添加 PostCSS 选项与插件。
+```bash
+module.exports = {
+  ...
+  webpack: {
+    ...
+    postCssLoaderOption: {
+      postcssOptions: {
+        plugins: [
+          require('postcss-pxtorem')({ // 用于将px自动转化为rem
+            rootValue: 16, // 1rem 等于 16px
+            propList: ['*'], // 所有属性都转换
+          }),
+        ],
+      }
+    }
+  }
+  ...
+}
+```
+
+18. 本地开启https服务
 > 使用 https://localhost/index.html 访问当前项目。
 ```bash
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",

package/src/webpack/loaderUtils.js

@@ -42,7 +42,7 @@ exports.cssLoaders = function (options) {
           if (options.cssLoaderUrlDir && resourcePath.includes(options.cssLoaderUrlDir)) {
             // 指定处理某类路径下的中相关 css 文件中的 url
             return true;
-          } 
+          }
           if (url.startsWith('data:')) {
             // 不处理 css 中的 bas64 url
             return false;
@@ -60,7 +60,10 @@ exports.cssLoaders = function (options) {
 
   const postCssLoader = {
     loader: 'postcss-loader',
-    options: postCssConfig // 同babel-loader的option
+    options: {
+      ...postCssConfig,
+      ...(options.postCssLoaderOption || {})
+    }
   };
 
   // generate loader string to be used with extract text plugin

package/src/webpack/webpack.dev.conf.js

@@ -7,7 +7,6 @@ const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const config = require('../config');
 // const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 module.exports = (akfunConfig) => {
@@ -36,7 +35,7 @@ module.exports = (akfunConfig) => {
     resolve: {
       // dev环境默认使用 require
       conditionNames: ['require'],
-      ...baseWebpackConfig.resolve,
+      ...baseWebpackConfig.resolve
     },
     module: {
       rules: utils.styleLoaders({
@@ -45,6 +44,7 @@ module.exports = (akfunConfig) => {
         cssLoaderUrl: config.webpack.cssLoaderUrl,
         cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
         cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
+        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
       })
     },
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值

package/src/webpack/webpack.library.conf.js

@@ -3,6 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换extrac
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const deepMergeConfig = require('../utils/deepMergeConfig');
 
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
@@ -41,6 +42,7 @@ module.exports = (akfunConfig) => {
         cssLoaderUrl: config.webpack.cssLoaderUrl,
         cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
         cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
+        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
@@ -68,6 +70,11 @@ module.exports = (akfunConfig) => {
     ]
   });
 
+  // 优先使用当前环境配置中的output
+  if (curEnvConfig.output) {
+    webpackLibConfig.output = deepMergeConfig(webpackLibConfig.output, curEnvConfig.output);
+  }
+
   // 是否开启Gzip
   if (curEnvConfig.productionGzip) {
     webpackLibConfig.plugins.push(

package/src/webpack/webpack.prod.conf.js

@@ -55,6 +55,7 @@ module.exports = (akfunConfig) => {
         cssLoaderUrl: config.webpack.cssLoaderUrl,
         cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
         cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
+        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境