小程序 webpack 工作流,用 webpack 构建小程序,支持小程序分包,ES6, 多环境配置,scss 开发,引入全局样式,设置 css 变量
项目还在完善中,高频更新。。
- api 模块
- 开发文档
- request 封装
- 基础类封装
- 基础 css 添加
- demo 完善
git clone https://github.com/sunniejs/weapp-webpack.git
cd weapp-webpack
npm install
npm run dev
使用微信开发者工具打开 weapp-webpack 文件预览效果
目录
- ✅ 支持分包开发
- ✅ 分环境打包小程序
- ✅ 定义环境变量,配置多环境变量
- ✅ Sass 全局样式
- ✅ 配置 alias 别名
- ✅ 生产代码压缩,压缩小程序包体积
- √ Vue-router
- √ Axios 封装及接口管理
- √ Webpack 4 vue.config.js 基础配置
- √ 配置 proxy 跨域
- √ 配置 打包分析
- √ 配置 externals 引入 cdn 资源
- √ 去掉 console.log
- √ splitChunks 单独打包第三方模块
- √ 添加 IE 兼容
- √ Eslint+Pettier 统一开发规范
✅ wx.request 封装
✅ 配置 alias 别名
✅
小程序可以通过命令启动,在 src/config
下设置不同环境下的变量。
注意: 如果你需要根据环境打包不同的小程序,需要在根目录下project.{env}.config.json
对应环境的小程序配置文件,启动项目会会读取对应的配置文件,如果你只有一个小程序,就不需要这三个文件
了project.development.config.json
, project.staging.config.json
, project.production.config.json
。
package.json
里的 scripts
配置 serve
stage
build
- 通过
npm run serve
启动本地 , 执行development
- 通过
npm run stage
打包测试 , 执行staging
- 通过
npm run build
打包正式 , 执行production
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.conf.js --watch --inline --progress",
"stage": "cross-env NODE_ENV=staging webpack --config build/webpack.staging.conf.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js -p && gulp minify"
}
变量我们统一在 src/config/env.{NODE_ENV}.js
里进行管理,拿本地环境文件 env.development.js
举例,用户可以根据需求修改
// 本地环境配置
module.exports = {
baseUrl: 'http://localhost:9018', // 项目地址
baseApi: 'https://test.xxx.com/api' // 本地api请求地址
}
公共的变量在 config/index.js 下添加, 不用添加三遍,比如app_title
, app_version
const merge = require('webpack-merge')
const config = require(`./env.${process.env.NODE_ENV}`)
const weappConfig = merge(config, {
app_title: 'webpack 小程序',
app_version: '1.0.0'
})
module.exports = weappConfig
生产使用 gulp 对代码进行压缩
├──build # webpack构建小程序源码
├──dist # 构建后代码
├──src # 小程序代码
│ ├── api # 数据请求
│ ├── assets # 静态资源
│ │ ├── index.scss # 全局通用样式
│ │ ├── mixin.scss # 全局mixin
│ │ └── variables.scss # 全局变量
│ ├── components # 组件
│ ├── config # 多环境配置文件
│ ├── subPack # 分包
│ ├── pages # 小程序页面
│ ├── utils # 工具类脚本
│ │ ├── filter.wxs # wxs脚本
│ │ └── utils.js # 工具类
│ ├──app.js
│ ├──app.wxss
│ ├──app.json
scss 编译 wxss, 高效开发,提高可维护性
首先 你可能会遇到 node-sass
安装不成功,别放弃多试几次!!!
实现可以在项目中使用sass
weapp-webpack/build/webpack.base.conf.js
通过 loader-file
和sass-loader
,将scss
, css
,wxss
编译成wxss
文件。
{
test: /\.(sc|c|wx)ss$/,
include: /src/,
use: [
{
loader: 'file-loader',
options: {
useRelativePath: true,
name: '[path][name].wxss',
context: resolve('src')
}
},
{
loader: 'sass-loader',
options: {
additionalData: `
@import "assets/css/index.scss";
$IMG_CDN: "https://imgs.solui.cn/";
`,
sassOptions: {
includePaths: [resolve('src', 'styles'), resolve('src')]
}
}
}
]
}
实现使用公共样式
通过additionalData
引入公共样式,不用在每个文件中引用样式。
additionalData: `@import "assets/css/index.scss";`,
可以直接在 scss
文件里引入 sass
变量
page {
background: $background-color;
}
全部设置 CDN 变量
在 css 样式中通过变量引入 CDN 图片链接,设置 $IMG_CDN:"https://imgs.solui.cn/weapp/";
,在css
引入$IMG_CDN
。
.logo {
width: 200rpx;
height: 200rpx;
background: url($IMG_CDN + 'logo.png') center / contain no-repeat;
}
可以在 js 中轻松引入文件,拜托路径点点点的烦恼。使用 '@/utils/util.js' 引入,你也可以配置其他的 alias
哦
配置
// 配置 webpack.base.conf.js
module.exports = {
resolve: {
alias: {
'@': resolve('src')
}
}
}
// 使用 index.js
import {toast} from '@/utils/util.js'
获取更多技术相关文章,关注公众号”前端女塾“,回复前端,即可加入”前端仙女群“。
如果对你有帮助送我一颗小星星(づ ̄ 3  ̄)づ ╭❤ ~