Skip to content

Commit 21be9f7

Browse files
author
杨益良
committed
config 1-5
1 parent aaf7f83 commit 21be9f7

File tree

10 files changed

+180
-29
lines changed

10 files changed

+180
-29
lines changed

‎part1/example1/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"license": "MIT",
1212
"dependencies": {
1313
"fetch": "^1.0.0",
14+
"html-webpack-plugin": "^2.10.0",
1415
"react": "^0.14.7"
1516
},
1617
"devDependencies": {

‎part1/example1/src/APIStuff.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
1-
var fetch = require('fetch') // fetch polyfill
2-
fetch('https://google.com')
1+
// var fetch = require('fetch') // fetch polyfill
2+
// fetch('https://google.com')
3+
var longnamelongname = 123456;
4+
console.log('apistuff');
5+
console.log('apistuff');
6+
console.log('apistuff');
7+
console.log('apistuff');
8+
console.log('apistuff');
9+
console.log('apistuff');
10+
console.log(longnamelongname);

‎part1/example1/src/UIStuff.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
var React = require('React')
2-
React.createClass({
3-
// stuff
4-
})
1+
// var React = require('React')
2+
// React.createClass({
3+
// // stuff
4+
// })
5+
require('./APIStuff.js');
6+
console.log('UIStuff');

‎part1/example1/src/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title> <%= htmlWebpackPlugin.options.title || '上单'%></title>
6+
</head>
7+
<body>
8+
9+
</body>
10+
</html>

‎part1/example1/webpack.config.js‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,5 @@
1-
var path = require('path')
2-
var webpack = require('webpack')
1+
var path = require('path');
32

4-
module.exports = {
5-
entry: ['./src/index'], // .js after index is optional
6-
output: {
7-
path: path.join(__dirname, 'dist'),
8-
filename: 'bundle.js'
9-
},
10-
plugins: [
11-
new webpack.optimize.UglifyJsPlugin({
12-
compressor: {
13-
warnings: false,
14-
},
15-
}),
16-
new webpack.optimize.OccurenceOrderPlugin()
17-
],
18-
module: {
19-
loaders: [{
20-
test: /\.css$/,
21-
loaders: ['style', 'css']
22-
}]
23-
}
24-
}
3+
var number = 5;
4+
var targetPath = path.resolve(__dirname,'webpackconfigs/config'+number+".js");
5+
module.exports = require(targetPath);

‎part1/example1/webpackconfigs/config1.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: ['./src/index'], // .js after index is optional
6+
output: {
7+
path: path.join(__dirname, '../dist/dist1'),
8+
filename: 'bundle.js'
9+
},
10+
module: {
11+
loaders: [{
12+
test: /\.css$/,
13+
loaders: ['style', 'css']
14+
}]
15+
}
16+
}
17+
/*
18+
webpack里最小的单位是module,把所有的层级关系打包在一个文件，多个小module组成更大的module，
19+
module有编号 __webpack_require__(7);
20+
每一个entry对应生成一个js文件
21+
*/

‎part1/example1/webpackconfigs/config2.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: ['./src/index'], // .js after index is optional
6+
output: {
7+
path: path.join(__dirname, '../dist/dist2'),
8+
filename: 'bundle.js'
9+
},
10+
module: {
11+
loaders: [{
12+
test: /\.css$/,
13+
loaders: ['style', 'css']
14+
}]
15+
},
16+
plugins: [
17+
new webpack.optimize.UglifyJsPlugin({
18+
compressor: {
19+
warnings: false,
20+
},
21+
})
22+
]
23+
}
24+
25+
/*
26+
UglifyJsPlugin 可以将冗长的变量名称精简,尽可能的压缩
27+
*/

‎part1/example1/webpackconfigs/config3.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: ['./src/index'], // .js after index is optional
6+
output: {
7+
path: path.join(__dirname, '../dist/dist3'),
8+
filename: 'bundle.js'
9+
},
10+
module: {
11+
loaders: [{
12+
test: /\.css$/,
13+
loaders: ['style', 'css']
14+
}]
15+
},
16+
plugins: [
17+
new webpack.optimize.OccurenceOrderPlugin(true)
18+
]
19+
}
20+
21+
/*
22+
通过module被引用的次数（出现的次数），来分配Id，用的次数多的module id就越小。
23+
意义不是很大。
24+
*/

‎part1/example1/webpackconfigs/config4.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
module.exports = {
5+
entry: {index: ['./src/index'],
6+
UIStuff: ['./src/UIStuff']}, // .js after index is optional
7+
output: {
8+
path: path.join(__dirname, '../dist/dist4'),
9+
filename: '[name].js'
10+
},
11+
module: {
12+
loaders: [{
13+
test: /\.css$/,
14+
loaders: ['style', 'css']
15+
}]
16+
},
17+
plugins: [
18+
new webpack.optimize.OccurenceOrderPlugin(true),
19+
new HtmlWebpackPlugin({
20+
template: './src/index.html',
21+
title:'testtitle',
22+
hash: true,
23+
chunks: ['common','index'],
24+
inject: 'body'
25+
})
26+
27+
]
28+
}
29+
30+
/*
31+
HtmlWebpackPlugin
32+
hash 为生成的html引用的js添加hash值<script src="UIStuff.js?6f347301ad70b306a459">
33+
默认所有的chunks都会在html上引入，chunks: ['index'] 是筛选html引用的chunk
34+
excludeChunks: ['index'] 排除不引用的chunk,
35+
inject 控制chunk插入的地方 ，默认是body里面
36+
*/

‎part1/example1/webpackconfigs/config5.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
module.exports = {
5+
entry: {index: ['./src/index'],
6+
UIStuff: ['./src/UIStuff']}, // .js after index is optional
7+
output: {
8+
path: path.join(__dirname, '../dist/dist5'),
9+
filename: '[name].js'
10+
},
11+
module: {
12+
loaders: [{
13+
test: /\.css$/,
14+
loaders: ['style', 'css']
15+
}]
16+
},
17+
plugins: [
18+
// new webpack.optimize.OccurenceOrderPlugin(true),
19+
new webpack.optimize.CommonsChunkPlugin({
20+
name: ["common"],
21+
filename: 'common.js',
22+
minChunks: 2
23+
}),
24+
new HtmlWebpackPlugin({
25+
template: './src/index.html',
26+
title:'testtitle',
27+
hash: true,
28+
chunks: ['common','index'],
29+
inject: 'body'
30+
})
31+
32+
]
33+
}
34+
35+
/*
36+
HtmlWebpackPlugin
37+
hash 为生成的html引用的js添加hash值<script src="UIStuff.js?6f347301ad70b306a459">
38+
默认所有的chunks都会在html上引入，chunks: ['index'] 是筛选html引用的chunk
39+
excludeChunks: ['index'] 排除不引用的chunk,
40+
inject 控制chunk插入的地方 ，默认是body里面
41+
*/

0 commit comments

Comments
 (0)