kbone小程序頁面入口自動生成

目前使用 kbone 創建一個小程序，如果你要添加或者修改頁面路徑，則需要修改 webpack.mp.config.js 配置文件。在 entry 入口里面新增或者修改頁面名字和路徑。

 

那么既然已經用了webpack 來進行打包，那么怎么才能讓這個入口文件進行自動更新呢？

 

我們可以獲取 /src/pages 目錄下面頁面的名稱，自動生成入口配置， webpack.mp.config.js 修改如下：

注意 /src/pages 目錄是修改后的目錄，具體請看 初始化kbone（react）並將頁面文件位置修改。如果頁面的目錄沒有改動，那么就直接輪詢 /src 目錄下面的頁面就可以了。

 

1、引入 /src/config/entry.js 文件

const fileList = require('../config/entry')

 

2、輪詢獲取到的pages里面的文件

// 小程序頁面配置自動化
let fileListNew = [];
// 輪詢數組，將 index 放到第一位，因為入口配置文件中第一個是在沒有設置編譯模式時默打開的頁面
fileList.forEach(function (item) {
    if (item === 'index') {
        fileListNew.unshift(item)
    } else {
        fileListNew.push(item);
    }
});
let entry = {}
fileListNew.forEach(function(item) {
  entry[item] = path.resolve(__dirname, '../src/pages/' + item + '.js')
})

　　注：如果頁面的目錄沒有改動，那么需要刪除 pages/

 

3、將 entry 對象設置為 小程序入口的值

module.exports = {
    mode: 'production',
    entry: {
        ...entry,   // 小程序頁面入口自動化

        // 小程序頁面入口
        // index: path.resolve(__dirname, '../src/pages/index.js'),
        // log: path.resolve(__dirname, '../src/pages/log.js'),
        // typelist: path.resolve(__dirname, '../src/pages/typelist.js'),
        // detail: path.resolve(__dirname, '../src/pages/detail.js'),
    },
    ...
}

　　

webpack.mp.config.js 配置文件完整代碼：

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const MpPlugin = require('mp-webpack-plugin')
const isOptimize = false // 是否壓縮業務代碼，開發者工具可能無法完美支持業務代碼使用到的 es 特性，建議自己做代碼壓縮
const fileList = require('../config/entry')
const pjson = require('../package.json')

// 從package.json 中獲取 arias，把@開頭的處理成當前項目能用的路徑
if (pjson && pjson.alias) {
  let alias = pjson.alias;
  let a = ''
  for (a in alias) {
    if (a.indexOf('@') === 0) {
        alias[a] = path.join(__dirname, '../src' + alias[a]);
    }
  }
}

// 小程序頁面配置自動化
let entry = {}
fileList.forEach(function(item) {
  entry[item] = path.resolve(__dirname, '../src/pages/' + item + '.js')
})

module.exports = {
    mode: 'production',
    entry: {
        ...entry,   // 小程序頁面入口自動化

        // 小程序頁面入口
        // index: path.resolve(__dirname, '../src/pages/index.js'),
        // log: path.resolve(__dirname, '../src/pages/log.js'),
        // typelist: path.resolve(__dirname, '../src/pages/typelist.js'),
        // detail: path.resolve(__dirname, '../src/pages/detail.js'),
    },
    output: {
        path: path.resolve(__dirname, '../build/mp/common'), // 放到小程序代碼目錄中的 common 目錄下
        filename: '[name].js', // 必需字段，不能修改
        library: 'createApp', // 必需字段，不能修改
        libraryExport: 'default', // 必需字段，不能修改
        libraryTarget: 'window', // 必需字段，不能修改
    },
    target: 'web', // 必需字段，不能修改
    optimization: {
        runtimeChunk: false, // 必需字段，不能修改
        splitChunks: { // 代碼分隔配置，不建議修改
            chunks: 'all',
            minSize: 1000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 100,
            maxInitialRequests: 100,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        },

        minimizer: isOptimize ? [
            // 壓縮CSS
            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.(css|wxss)$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', {
                        discardComments: {
                            removeAll: true,
                        },
                        minifySelectors: false, // 因為 wxss 編譯器不支持 .some>:first-child 這樣格式的代碼，所以暫時禁掉這個
                    }],
                },
                canPrint: false
            }),
            // 壓縮 js
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
            })
        ] : [],
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.[t|j]sx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    plugins : [ 
                        ["transform-react-jsx"], 
                        ["class"],
                    ] 
                }
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.vue', '.json'],
        alias: {
            ...pjson.alias,
            // '@images': path.join(__dirname, "../src/assets/images"),
            // '@components': path.join(__dirname, '../src/components'),
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.isMiniprogram': process.env.isMiniprogram, // 注入環境變量，用於業務代碼判斷
        }),
        new MiniCssExtractPlugin({
            filename: '[name].wxss',
        }),
        new MpPlugin(require('./miniprogram.config'))
    ],
}