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