Skip to content

Commit d400a12

Browse files
PlortinusPlortinus
committed
update readme
1 parent 6c5194e commit d400a12

File tree

3 files changed

+87
-32
lines changed

3 files changed

+87
-32
lines changed

‎README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,77 @@ node server.js
6969
└── package.json # package info
7070
```
7171

72+
## How The `Multiple Page` Works ?(Assumed that you have the basic knowlege of [webpack](https://github.com/webpack/webpack))
73+
74+
1. Firstly, we need to get the `entries` and `chunks`
75+
76+
* The constant `entries` is an [Object](https://webpack.js.org/configuration/entry-context/#entry) type, it's prop is the `chunk` and it's value is the relative path of the entry js file
77+
* The constant `chunks` is an Array type for the [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/)
78+
79+
This step needs a package called: [glob](https://github.com/isaacs/node-glob)
80+
```js
81+
const entries = {}
82+
const chunks = []
83+
glob.sync('./src/pages/**/*.js').forEach(path => {
84+
// Get all the entry js files and forEach them
85+
86+
const chunk = path.split('./src/pages/')[1].split('.js')[0]
87+
// E.g, chunk = 'user/index/app' path = './src/pages/user/index/app.js'
88+
89+
entries[chunk] = path
90+
// Now we got the entries
91+
92+
chunks.push(chunk)
93+
// Then, we collect the chunks for CommonsChunkPlugin
94+
})
95+
// ...
96+
const config = {
97+
entry: entries, // The constant entries is used here
98+
plugins: [
99+
new CommonsChunkPlugin({
100+
name: 'vendors',
101+
filename: 'assets/js/vendors.js',
102+
chunks: chunks, // The constant chunks is used here
103+
minChunks: chunks.length
104+
})
105+
// ...
106+
],
107+
}
108+
```
109+
110+
2. Then,combine the `html template file` with the right `chunk`
111+
112+
The second step,we use the webpack plugin: [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
113+
114+
```js
115+
// ...
116+
const config = {
117+
// ...
118+
}
119+
// ...
120+
glob.sync('./src/pages/**/*.html').forEach(path => {
121+
// Get all the html template files and forEach them
122+
// E.g, path = './src/pages/user/index/app.html'
123+
124+
const filename = path.split('./src/pages/')[1].split('/app.html')[0] + '.html'
125+
// E.g, the html filename will be 'user/index.html' in the 'dist' folder
126+
127+
const chunk = path.split('./src/pages/')[1].split('.html')[0]
128+
// E,g. the chunk will be 'user/login/app'
129+
130+
const htmlConf = {
131+
filename: filename,
132+
template: path,
133+
inject: 'body',
134+
favicon: './src/assets/img/logo.png',
135+
hash: process.env.NODE_ENV === 'production',
136+
chunks: ['vendors', chunk]
137+
}
138+
config.plugins.push(new HtmlWebpackPlugin(htmlConf))
139+
})
140+
```
141+
142+
##Inspired by [element-starter](https://github.com/ElementUI/element-starter)
143+
72144
## License
73145
MIT

‎server.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,8 @@
1-
// var TARGET = 'https://github.com';
21
var express = require('express')
32
var app = express()
4-
var http = require('http')
5-
var httpProxy = require('http-proxy')
6-
var proxy = httpProxy.createProxyServer({})
73

84
app.use(express.static('./dist'))
95

10-
// app.all('/*', function(req, res, next) {
11-
// console.log(req.url);
12-
// return proxy.web(req, res, {
13-
// target: TARGET
14-
// });
15-
// // next();
16-
// });
17-
186
app.get('/', function (req, res) {
197
res.send('Hello Vue')
208
})

‎webpack.config.js

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
88

99
const entries = {}
1010
const chunks = []
11-
glob.sync('./src/pages/**/*.js').forEach(function (name) {
12-
const n = name.slice(name.lastIndexOf('src/') + 10, name.length - 3)
13-
entries[n] = [name]
14-
chunks.push(n)
11+
glob.sync('./src/pages/**/*.js').forEach(path => {
12+
const chunk = path.split('./src/pages/')[1].split('.js')[0]
13+
entries[chunk] = path
14+
chunks.push(chunk)
1515
})
1616

1717
const config = {
@@ -97,23 +97,18 @@ const config = {
9797
devtool: '#eval-source-map'
9898
}
9999

100-
glob.sync('./src/pages/**/*.html').forEach(function (name) {
101-
const pathname = name.slice(name.lastIndexOf('src/') + 4, name.length - 5)
102-
// filename used folder's name
103-
const conf = {
104-
filename: pathname.substring(6, pathname.length - 4) + '.html',
105-
template: 'src/' + pathname + '.html'
100+
glob.sync('./src/pages/**/*.html').forEach(path => {
101+
const filename = path.split('./src/pages/')[1].split('/app.html')[0] + '.html'
102+
const chunk = path.split('./src/pages/')[1].split('.html')[0]
103+
const htmlConf = {
104+
filename: filename,
105+
template: path,
106+
inject: 'body',
107+
favicon: './src/assets/img/logo.png',
108+
hash: process.env.NODE_ENV === 'production',
109+
chunks: ['vendors', chunk]
106110
}
107-
const chunk = pathname.substring(6, pathname.length)
108-
if (chunks.indexOf(chunk) > -1) {
109-
conf.inject = 'body'
110-
conf.chunks = ['vendors', chunk]
111-
}
112-
if (process.env.NODE_ENV === 'production') {
113-
conf.hash = true
114-
}
115-
conf.favicon = './src/assets/img/logo.png'
116-
config.plugins.push(new HtmlWebpackPlugin(conf))
111+
config.plugins.push(new HtmlWebpackPlugin(htmlConf))
117112
})
118113

119114
module.exports = config

0 commit comments

Comments
 (0)