Applet development and webpack packaging

You are welcome to visit my article. This article mainly shares two small program projects that were recently developed in the company. One project is a mall, and one project is community-related. It is packaged and compiled using webpack.
The advantage of webpack compilation is that you can perform rendering without refreshing the page, and using the tools that come with the applet, as long as you perform the save, the entire page will be refreshed. Once the traffic is too large, and the field is adjusted at zero time, sometimes the applet tool will crash.

Need before preparation

  • You need to register the applet and you already have developer rights
  • It’s very important to get the appid in the applet background.

Start building a small program skeleton

You need to build a project file like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- dist
- package and compile to file
- scripts
- build.mjs
- check.mjs
- config.mjs
- move.mjs
- start.mjs
- src
- app.js
- app.less
- app.json
- project.config.js
- assets
- components
- pages
- server
- untils
- node_modules
- webpack.config.prod.mjs
- webpack.config.dev.mjs
- package.json
- LICENSE
- README.md

More info: devtools

  • webpack.config.prod.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import check from './scripts/check.mjs'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import path from 'path'
import CleanWebpackPlugin from 'clean-webpack-plugin'
import webpack from 'webpack'
import objectRestSpread from '@babel/plugin-proposal-object-rest-spread'
import fastAsync from 'fast-async'
import {
srcRoot,
pagePath,
componentPath,
assetsPath
} from './scripts/config.mjs'
export default function() {
return {
entry: check.entries,
output: {
path: path.resolve('dist'),
filename: '[name].js',
libraryTarget: 'umd'
},
resolve: {
extensions: ['.js'],
modules: ['src', 'node_modules']
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [objectRestSpread, fastAsync]
}
},
{
test: /\.css?$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}
]
},
watchOptions: {
ignored: /node_modules/
},
plugins: [
new webpack.DefinePlugin({
__DEV__: false,
__ENV__: '""',
__QR__: '""'
}),
new webpack.optimize.UglifyJsPlugin({
output : { comments : false },
compress: { warnings: false},
sourceMap: true,
minimize: true
}),
new CleanWebpackPlugin(['dist/*']),
new ExtractTextPlugin('[name].wxss'),
new CopyWebpackPlugin([
{
context: path.join(srcRoot, pagePath),
from: '**/*.wxml',
to: pagePath
},
{
context: path.join(srcRoot, pagePath),
from: '**/*.json',
to: pagePath
},
{
context: path.join(srcRoot, componentPath),
from: '**/*.wxml',
to: componentPath
},
{
context: path.join(srcRoot, componentPath),
from: '**/*.json',
to: componentPath
},
{
context: path.join(srcRoot, assetsPath),
from: '**/*.*',
to: assetsPath
},
{
context: srcRoot,
from: 'app.json'
},
{
context: srcRoot,
from: 'project.config.json'
}
])
]
}
}
  • webpack.config.dev.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import check from './scripts/check.mjs'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import path from 'path'
import CleanWebpackPlugin from 'clean-webpack-plugin'
import webpack from 'webpack'
import objectRestSpread from '@babel/plugin-proposal-object-rest-spread'
import fastAsync from 'fast-async'
import {
srcRoot,
pagePath,
componentPath,
assetsPath
} from './scripts/config.mjs'
export default function() {
return {
devtool: 'cheap-module-source-map',
entry: check.entries,
output: {
path: path.resolve('dist'),
filename: '[name].js',
libraryTarget: 'umd'
},
resolve: {
extensions: ['.js'],
modules: ['src', 'node_modules']
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [objectRestSpread, fastAsync]
}
},
{
test: /\.css?$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}
]
},
watchOptions: {
ignored: /node_modules/
},
plugins: [
new webpack.DefinePlugin({
__DEV__: true,
__ENV__: '""',
__QR__: '""'
}),
new CleanWebpackPlugin(['dist/*']),
new ExtractTextPlugin('[name].wxss'),
new CopyWebpackPlugin([
{
context: path.join(srcRoot, pagePath),
from: '**/*.wxml',
to: pagePath
},
{
context: path.join(srcRoot, pagePath),
from: '**/*.json',
to: pagePath
},
{
context: path.join(srcRoot, componentPath),
from: '**/*.wxml',
to: componentPath
},
{
context: path.join(srcRoot, componentPath),
from: '**/*.json',
to: componentPath
},
{
context: path.join(srcRoot, assetsPath),
from: '**/*.*',
to: assetsPath
},
{
context: srcRoot,
from: 'app.json'
},
{
context: srcRoot,
from: 'project.config.json'
}
])
]
}
}
  • scripts-> build.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import webpack from 'webpack'
import config from '../webpack.config.prod'
// const move = require('./move')
webpack(config(), (err, stats) => {
// move()
console.log(
stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}),
'打包完成'
)
})
  • scripts-> check.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import glob from 'glob'
import path from 'path'
import { srcRoot, pagePath, componentPath } from './config.mjs'
const { join } = path
const getEntriesByPath = dirPath => {
return glob
.sync('*/', {
cwd: join(srcRoot, dirPath)
})
.reduce((entries, dir) => {
const js = glob.sync(join(dirPath, dir, '*.js'), {
cwd: srcRoot
})
if (js.length === 1) {
return Object.assign(entries, {
[join(dirPath, dir, dir).replace( (process.platform === 'win32' ? /\\$/ : /\/$/) , '')]: js[0]
})
} else {
console.log(
`-- The directory of ${join(dirPath, dir)} must be unique --`
)
return entries
}
}, {})
}
export default {
entries: Object.assign(
{
app: './src/app.js'
},
getEntriesByPath(pagePath),
getEntriesByPath(componentPath)
)
}
  • scripts-> config.mjs
1
2
3
4
export const srcRoot = 'src'
export const pagePath = 'pages'
export const componentPath = 'components'
export const assetsPath = 'assets'
  • scripts-> move.js
1
2
3
4
5
6
7
8
9
10
import path from 'path'
import fs from 'fs-extra'
const sourceDir = path.resolve(path.dirname(''), 'lib')
const distDir = path.resolve(path.dirname(''), 'examples/lib')
export default () => {
console.log('---- copy finished ----')
fs.copySync(sourceDir, distDir)
}
  • scripts-> start.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import webpack from 'webpack'
import config from '../webpack.config.dev'
// import move from './move'
const compiler = webpack(config())
compiler.watch({}, (err, stats) => {
// move()
console.log(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}))
})
  • package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
"name": "dmeo",
"version": "1.0.0",
"description": "dmeo",
"main": "app.js",
"keywords": [
"shop"
],
"scripts": {
"start": "node -r @std/esm scripts/start.mjs",
"build": "node -r @std/esm scripts/build.mjs",
"check": "node -r @std/esm scripts/check.mjs",
"test": "babel-node node_modules/.bin/jasmine --presets=@babel/preset-env",
"eslint:fix": "eslint --fix .",
"eslint": "eslint"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.35",
"@babel/node": "^7.0.0-beta.35",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.35",
"@babel/preset-env": "^7.0.0-beta.35",
"babel-loader": "8.0.0-beta.0",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.7",
"eslint": "^4.14.0",
"eslint-plugin-import": "^2.8.0",
"extract-text-webpack-plugin": "^3.0.2",
"fast-async": "^6.3.0",
"fs-extra": "^5.0.0",
"glob": "^7.1.2",
"jasmine": "^2.8.0",
"jasmine-spec-reporter": "^4.2.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.1",
"webpack": "^3.8.1"
},
"dependencies": {
"@std/esm": "^0.18.0",
"es6-promise": "^4.1.1",
"flyio": "^0.5.9",
"lodash": "^4.17.4"
},
"author": "oksite",
"license": "MIT"
}

Development and compilation

1
2
3
4
5
6
7
8
9
# install dependencies
npm insatll
# serve start
npm start
# build project
npm build