Skip to content

Commit fb1ae7b

Browse files
committed
optimize webpack configuration
1 parent 91afc69 commit fb1ae7b

File tree

10 files changed

+158
-139
lines changed

10 files changed

+158
-139
lines changed

.babelrc

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
11
{
2-
"presets":["react","es2015"],
3-
"env":{
4-
"development":{
5-
"plugins":[
6-
[
7-
"react-transform",
8-
{
9-
"transforms":[
10-
{
11-
"transform":"react-transform-hmr",
12-
"imports":["react"],
13-
"locals":["module"]
14-
}
15-
]
16-
}
17-
]
18-
]
19-
}
20-
}
2+
"presets": ["react", "es2015"]
213
}

README-EN.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -226,18 +226,13 @@ npm install
226226
```
227227
npm start
228228
```
229-
open [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
229+
The browser will go to [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
230230
### multi-language
231231
In the [i18n.json](https://github.com/chvin/react-tetris/blob/master/i18n.json) configuration in the multi-language environment, the use of "lan" parameter matching language such as: `https://chvin.github.io/react-tetris/?lan=en`
232232
### Build
233-
* Mac:
234233
```
235234
npm run build
236235
```
237-
* Windows:
238-
```
239-
npm run windowsBuild
240-
```
241236

242237
Build the results in the build folder.
243238

README.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -226,18 +226,13 @@ npm install
226226
```
227227
npm start
228228
```
229-
在浏览器进入 [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
229+
浏览自动打开 [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
230230
### 多语言
231231
[i18n.json](https://github.com/chvin/react-tetris/blob/master/i18n.json) 配置多语言环境,使用"lan"参数匹配语言如:`https://chvin.github.io/react-tetris/?lan=en`
232232
### 打包编译
233-
* Mac:
234233
```
235234
npm run build
236235
```
237-
* Windows:
238-
```
239-
npm run windowsBuild
240-
```
241236

242237
在build文件夹下生成结果。
243238

build/app-1.0.0.js

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/app-1.0.0.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \"Tetris\".",
55
"scripts": {
66
"start": "webpack-dev-server --progress",
7-
"build": "rm -rf ./build/* && NODE_ENV=production webpack --config ./webpack.production.config.js --progress && ls ./build",
8-
"windowsBuild": "rm -rf ./build/* && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress && ls ./build"
7+
"build": "rm -rf ./build/* && webpack --config ./webpack.production.config.js --progress && ls ./build"
98
},
109
"repository": {
1110
"type": "git",
@@ -25,6 +24,7 @@
2524
},
2625
"homepage": "https://github.com/chvin/react-tetris#readme",
2726
"devDependencies": {
27+
"autoprefixer": "^6.7.2",
2828
"babel-core": "^6.13.2",
2929
"babel-loader": "^6.2.4",
3030
"babel-plugin-react-transform": "^2.0.2",
@@ -44,6 +44,10 @@
4444
"json-loader": "^0.5.4",
4545
"less": "^2.7.1",
4646
"less-loader": "^2.2.3",
47+
"open-browser-webpack-plugin": "0.0.3",
48+
"postcss": "^5.2.12",
49+
"postcss-loader": "^1.2.2",
50+
"precss": "^1.4.0",
4751
"react-transform-hmr": "^1.0.4",
4852
"style-loader": "^0.13.1",
4953
"url-loader": "^0.5.7",

server/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<meta charset="UTF-8">
1010
<title>俄罗斯方块</title>
1111
<link href="./loader.css" rel="stylesheet" />
12+
<link href="./css.css" rel="stylesheet">
1213
</head>
1314
<body>
1415
<div id="root">

w.config.js

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
var webpack = require('webpack');
2+
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
3+
var HtmlWebpackPlugin = require('html-webpack-plugin');
4+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
5+
var precss = require('precss');
6+
var autoprefixer = require('autoprefixer');
7+
var CopyWebpackPlugin = require('copy-webpack-plugin');
8+
var version = require('./package.json').version;
9+
10+
11+
// 程序入口
12+
var entry = __dirname + '/src/index.js';
13+
14+
// 输出文件
15+
var output = {
16+
filename: 'page/[name]/index.js',
17+
chunkFilename: 'chunk/[name].[chunkhash:5].chunk.js',
18+
};
19+
20+
// 生成source-map追踪js错误
21+
var devtool = 'source-map';
22+
23+
// eslint
24+
var eslint = {
25+
configFile: __dirname + '/.eslintrc.js',
26+
}
27+
28+
// loader
29+
var loaders = [
30+
{
31+
test: /\.(json)$/,
32+
exclude: /node_modules/,
33+
loader: 'json',
34+
},
35+
{
36+
test: /\.(js|jsx)$/,
37+
exclude: /node_modules/,
38+
loader: 'babel!eslint-loader',
39+
},
40+
{
41+
test: /\.(?:png|jpg|gif)$/,
42+
loader: 'url?limit=8192', //小于8k,内嵌;大于8k生成文件
43+
},
44+
{
45+
test: /\.less/,
46+
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[hash:base64:4]!postcss!less'),
47+
}
48+
];
49+
50+
// dev plugin
51+
var devPlugins = [
52+
new CopyWebpackPlugin([
53+
{ from: './src/resource/music/music.mp3' },
54+
{ from: './src/resource/css/loader.css' },
55+
]),
56+
// 热更新
57+
new webpack.HotModuleReplacementPlugin(),
58+
// 允许错误不打断程序, 仅开发模式需要
59+
new webpack.NoErrorsPlugin(),
60+
// 打开浏览器页面
61+
new OpenBrowserPlugin({
62+
url: 'http://0.0.0.0:8080/'
63+
}),
64+
// css打包
65+
new ExtractTextPlugin('css.css', {
66+
allChunks: true
67+
}),
68+
]
69+
70+
// production plugin
71+
var productionPlugins = [
72+
// 定义生产环境
73+
new webpack.DefinePlugin({
74+
'process.env.NODE_ENV': '"production"',
75+
}),
76+
// 复制
77+
new CopyWebpackPlugin([
78+
{ from: './src/resource/music/music.mp3' },
79+
{ from: './src/resource/css/loader.css' },
80+
]),
81+
// HTML 模板
82+
new HtmlWebpackPlugin({
83+
template: __dirname + '/server/index.tmpl.html'
84+
}),
85+
// JS压缩
86+
new webpack.optimize.UglifyJsPlugin({
87+
compress: {
88+
warnings: false
89+
}}
90+
),
91+
// css打包
92+
new ExtractTextPlugin('css-' + version + '.css', {
93+
allChunks: true
94+
}),
95+
];
96+
97+
// dev server
98+
var devServer = {
99+
contentBase: './server',
100+
colors: true,
101+
historyApiFallback: false,
102+
port: 8080, // defaults to "8080"
103+
hot: true, // Hot Module Replacement
104+
inline: true, // Livereload
105+
host: '0.0.0.0',
106+
};
107+
108+
module.exports = {
109+
entry: entry,
110+
devtool: devtool,
111+
output: output,
112+
loaders: loaders,
113+
devPlugins: devPlugins,
114+
productionPlugins: productionPlugins,
115+
devServer: devServer,
116+
postcss: function () {
117+
return [precss, autoprefixer];
118+
},
119+
version: version
120+
};

webpack.config.js

Lines changed: 8 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,18 @@
1-
var CopyWebpackPlugin = require('copy-webpack-plugin');
2-
3-
var webpack = require('webpack');
1+
var config = require('./w.config');
42

53
// dev环境配置
64
module.exports = {
7-
devtool: 'eval-source-map', // 生成source-map追踪js错误
8-
entry: __dirname + '/src/index.js', // 程序入口
5+
devtool: config.devtool,
6+
entry: config.entry,
97
output: {
108
path: __dirname + '/server',
119
filename: 'app.js',
1210
},
13-
eslint: {
14-
configFile: __dirname + '/.eslintrc.js',
15-
},
11+
eslint: config.eslint,
1612
module: {
17-
loaders: [
18-
{
19-
test: /\.(json)$/,
20-
exclude: /node_modules/,
21-
loader: 'json',
22-
},
23-
{
24-
test: /\.(js|jsx)$/,
25-
exclude: /node_modules/,
26-
loader: 'babel!eslint-loader',
27-
},
28-
{
29-
test: /\.(?:png|jpg|gif)$/,
30-
loader: 'url',
31-
},
32-
{
33-
test: /\.css/,
34-
loader: 'style!css?localIdentName=[local]-[hash:base64:5]',
35-
},
36-
{
37-
test: /\.less/,
38-
loader: 'style!css?modules&localIdentName=[local]-[hash:base64:5]!less',
39-
},
40-
],
41-
},
42-
plugins: [
43-
new CopyWebpackPlugin([
44-
{ from: './src/resource/music/music.mp3' },
45-
{ from: './src/resource/css/loader.css' },
46-
]),
47-
new webpack.HotModuleReplacementPlugin(),
48-
],
49-
devServer: {
50-
contentBase: './server',
51-
colors: true,
52-
historyApiFallback: false,
53-
port: 8080, // defaults to "8080"
54-
hot: true, // Hot Module Replacement
55-
inline: true, // Livereload
56-
host: '0.0.0.0',
13+
loaders: config.loaders
5714
},
15+
plugins: config.devPlugins,
16+
devServer: config.devServer,
17+
postcss: config.postcss
5818
};

webpack.production.config.js

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,17 @@
1-
var webpack = require('webpack');
2-
var HtmlWebpackPlugin = require('html-webpack-plugin');
3-
var ExtractTextPlugin = require('extract-text-webpack-plugin');
4-
var CopyWebpackPlugin = require('copy-webpack-plugin');
5-
var version = require('./package.json').version;
1+
var config = require('./w.config');
62

73
// production环境配置
84
module.exports = {
9-
devtool: 'source-map',// 生成source-map追踪js错误
10-
entry: __dirname + '/src/index.js',// 程序入口
5+
devtool: config.devtool,
6+
entry: config.entry,
117
output: {
128
path: __dirname + '/build',
13-
filename: 'app-'+version+'.js',
14-
},
15-
eslint: {
16-
configFile: __dirname + '/.eslintrc.js'
9+
filename: 'app-' + config.version+'.js',
1710
},
11+
eslint: config.eslint,
1812
module: {
19-
loaders: [
20-
{
21-
test: /\.(json)$/,
22-
exclude: /node_modules/,
23-
loader: 'json',
24-
},
25-
{
26-
test: /\.(js|jsx)$/,
27-
exclude: /node_modules/,
28-
loader: 'babel!eslint-loader',
29-
},
30-
{
31-
test: /\.(?:png|jpg|gif)$/,
32-
loader: 'url?limit=8192', //小于8k,内嵌;大于8k生成文件
33-
},
34-
{
35-
test: /\.less/,
36-
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[hash:base64:4]!less'),
37-
},
38-
],
13+
loaders: config.loaders
3914
},
40-
plugins:[
41-
new CopyWebpackPlugin([
42-
{ from: './src/resource/music/music.mp3' },
43-
{ from: './src/resource/css/loader.css' },
44-
]),
45-
new HtmlWebpackPlugin({
46-
template: __dirname + '/server/index.tmpl.html'
47-
}),
48-
new webpack.optimize.UglifyJsPlugin(),
49-
new ExtractTextPlugin('css-' + version + '.css'),
50-
new webpack.optimize.DedupePlugin(),
51-
new webpack.DefinePlugin({
52-
'process.env.NODE_ENV': '"production"',
53-
}),
54-
],
15+
plugins: config.productionPlugins,
16+
postcss: config.postcss
5517
};

0 commit comments

Comments
 (0)