• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

kbone小程序页面入口自动生成

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

目前使用 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\'))
    ],
}

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序随记发布时间:2022-07-18
下一篇:
优化微信小程序之九宫格布局方案发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap