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