使用现有项目导入webpack打包小程序代码， 目前kbone官网案例使用的是vue2.0方法，在3.0中使用出现H5代码运行不起来（自己对webpack这块不熟悉），只针对打包小程序代码这块总决下 编写 webpack 配置 在根目录下新建一个 build/webpack.mp.config.js 文件,官网配置如下 const path = require('path') const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const {VueLoaderPlugin} = require('vue-loader') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件 const stylehacks = require('stylehacks') const autoprefixer = require('autoprefixer') const mpPluginConfig = require('./miniprogram.config.js') // 插件配置
const isDevelop = process.env.NODE_ENV === 'development'
const isOptimize = true // 是否压缩业务代码，开发者工具可能无法完美支持业务代码使用到的 es 特性，建议自己做代码压缩
module.exports = {
mode: 'production',
entry: {
// js 入口
home: path.resolve(__dirname, '../src/main.mp.js'),
},
output: {
path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代码目录中的 common 目录下
filename: '[name].js', // 必需字段，不能修改
library: 'createApp', // 必需字段，不能修改
libraryExport: 'default', // 必需字段，不能修改
libraryTarget: 'window', // 必需字段，不能修改
},
watch: isDevelop,
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)/i,
parallel: true,
})
] : [],
},
module: {
rules: [
// html
{
test: /.html
/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
modules: true,
},
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
return [
autoprefixer,
stylehacks(), // 剔除 ie hack 代码
]
}
}
},
{
loader: 'less-loader'
}
],
},
// vue
{
test: /.vue/,
exclude: /node_modules/,
use: [{
loader: 'thread-loader',
}, {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}, {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue
/,
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
}
}
],
exclude: /node_modules/
},
// res
{
test: /.(png|jpg|jpeg|gif|svg|eot|woff|woff2|ttf)
': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '../src'),
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量，用于业务代码判断
}),
new MiniCssExtractPlugin({
filename: '[name].wxss',
}),
new VueLoaderPlugin(),
new MpPlugin(mpPluginConfig),
],
}
在根目录下新建一个 build/miniprogram.config.js 文件 /**
- 配置参考：wechat-miniprogram.github.io/kbone/docs/…
*/
module.exports = {
origin: 'test.miniprogram.com',
entry: '/',
router: {
home: [
'/(home|index)?',
],
}, redirect: { notFound: 'home', accessDenied: 'home', }, generate: { autoBuildNpm: 'npm', }, app: { backgroundTextStyle: 'dark', navigationBarTextStyle: 'white', navigationBarTitleText: 'kbone', }, appExtraConfig: { sitemapLocation: 'sitemap.json', }, global: { share: true, windowScroll: false, backgroundColor: '#F7F7F7', }, pages: {}, optimization: { domSubTreeLevel: 10, elementMultiplexing: true, textMultiplexing: true, commentMultiplexing: true, domExtendMultiplexing: true, styleValueReduce: 5000, attrValueReduce: 5000, }, projectConfig: { projectname: 'kbone-test-vue', appid: 'wxd03d8e376fe4bad0', }, }
main.mp配置： import Vue from 'vue' import { sync } from 'vuex-router-sync' import App from './App.vue' import store from './store' import router from './router/index.mp' export default function createApp() { const container = document.createElement('div') container.id = 'app' document.body.appendChild(container) Vue.config.productionTip = false sync(store, router) return new Vue({ el: '#app', router, store, render: h => h(App) }) }
router配置： import Vue from 'vue' import Router from 'vue-router' import Home from '../views/list/index.vue' Vue.use(Router) const router = new Router({ mode: 'history', routes: [{ path: '/(home|index)?', name: 'Home', component: Home, }, { path: '/index.html', name: 'HomeHtml', component: Home, }, { path: '/test/(home|index)', name: 'HomeTest', component: Home, }], }) export default router
package.json配置 "scripts": { "mp": "cross-env NODE_ENV=development webpack --config build/webpack.mp.config.js --progress --hide-modules" }, "dependencies": { "vuex-router-sync": "^5.0.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "cross-env": "^6.0.3", "css-loader": "^3.4.0", "cssnano": "^4.1.10", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^3.2.0", "less": "^3.0.4", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.5.0", "mp-webpack-plugin": "latest", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^5.0.3", "portfinder": "^1.0.25", "postcss-loader": "^2.0.8", "postcss-pxtorem": "^4.0.1", "reduce-loader": "^0.1.1", "rimraf": "^2.7.1", "terser-webpack-plugin": "^2.3.0", "thread-loader": "^2.1.3", "ts-loader": "^6.2.1", "typescript": "^3.7.3", "url-loader": "^0.5.8", "vue-improve-loader": "^0.1.1", "vue-loader": "^15.7.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0", "webpack-merge": "^4.1.0" } 目前只配置的单页面测试，还未进行多页面测试 vue的滚动事件在小程序中全部失效，需要重写 通过 process.env.isMiniprogram 来判断是否在小程序环境（webpack.mp.config.js有注入一个环境变量） 注意事项： vue中的css样式使用的是局部样式，scoped属性，打包成小程序时一定要去掉，不然会造成样式丢失。 综合考虑，还是使用小程原生开发，
