提交 fb1ae7b1 编写于 作者: 城危

optimize webpack configuration

上级 91afc691
{
"presets":["react","es2015"],
"env":{
"development":{
"plugins":[
[
"react-transform",
{
"transforms":[
{
"transform":"react-transform-hmr",
"imports":["react"],
"locals":["module"]
}
]
}
]
]
}
}
"presets": ["react", "es2015"]
}
......@@ -226,18 +226,13 @@ npm install
```
npm start
```
open [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
The browser will go to [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
### multi-language
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`
### Build
* Mac:
```
npm run build
```
* Windows:
```
npm run windowsBuild
```
Build the results in the build folder.
......
......@@ -226,18 +226,13 @@ npm install
```
npm start
```
在浏览器进入 [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
浏览自动打开 [http://0.0.0.0:8080/](http://0.0.0.0:8080/)
### 多语言
[i18n.json](https://github.com/chvin/react-tetris/blob/master/i18n.json) 配置多语言环境,使用"lan"参数匹配语言如:`https://chvin.github.io/react-tetris/?lan=en`
### 打包编译
* Mac:
```
npm run build
```
* Windows:
```
npm run windowsBuild
```
在build文件夹下生成结果。
......
此差异已折叠。
此差异已折叠。
......@@ -4,8 +4,7 @@
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \"Tetris\".",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "rm -rf ./build/* && NODE_ENV=production webpack --config ./webpack.production.config.js --progress && ls ./build",
"windowsBuild": "rm -rf ./build/* && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress && ls ./build"
"build": "rm -rf ./build/* && webpack --config ./webpack.production.config.js --progress && ls ./build"
},
"repository": {
"type": "git",
......@@ -25,6 +24,7 @@
},
"homepage": "https://github.com/chvin/react-tetris#readme",
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
......@@ -44,6 +44,10 @@
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"open-browser-webpack-plugin": "0.0.3",
"postcss": "^5.2.12",
"postcss-loader": "^1.2.2",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
......
......@@ -9,6 +9,7 @@
<meta charset="UTF-8">
<title>俄罗斯方块</title>
<link href="./loader.css" rel="stylesheet" />
<link href="./css.css" rel="stylesheet">
</head>
<body>
<div id="root">
......
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var version = require('./package.json').version;
// 程序入口
var entry = __dirname + '/src/index.js';
// 输出文件
var output = {
filename: 'page/[name]/index.js',
chunkFilename: 'chunk/[name].[chunkhash:5].chunk.js',
};
// 生成source-map追踪js错误
var devtool = 'source-map';
// eslint
var eslint = {
configFile: __dirname + '/.eslintrc.js',
}
// loader
var loaders = [
{
test: /\.(json)$/,
exclude: /node_modules/,
loader: 'json',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel!eslint-loader',
},
{
test: /\.(?:png|jpg|gif)$/,
loader: 'url?limit=8192', //小于8k,内嵌;大于8k生成文件
},
{
test: /\.less/,
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[hash:base64:4]!postcss!less'),
}
];
// dev plugin
var devPlugins = [
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
]),
// 热更新
new webpack.HotModuleReplacementPlugin(),
// 允许错误不打断程序, 仅开发模式需要
new webpack.NoErrorsPlugin(),
// 打开浏览器页面
new OpenBrowserPlugin({
url: 'http://0.0.0.0:8080/'
}),
// css打包
new ExtractTextPlugin('css.css', {
allChunks: true
}),
]
// production plugin
var productionPlugins = [
// 定义生产环境
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
// 复制
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
]),
// HTML 模板
new HtmlWebpackPlugin({
template: __dirname + '/server/index.tmpl.html'
}),
// JS压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}}
),
// css打包
new ExtractTextPlugin('css-' + version + '.css', {
allChunks: true
}),
];
// dev server
var devServer = {
contentBase: './server',
colors: true,
historyApiFallback: false,
port: 8080, // defaults to "8080"
hot: true, // Hot Module Replacement
inline: true, // Livereload
host: '0.0.0.0',
};
module.exports = {
entry: entry,
devtool: devtool,
output: output,
loaders: loaders,
devPlugins: devPlugins,
productionPlugins: productionPlugins,
devServer: devServer,
postcss: function () {
return [precss, autoprefixer];
},
version: version
};
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var config = require('./w.config');
// dev环境配置
module.exports = {
devtool: 'eval-source-map', // 生成source-map追踪js错误
entry: __dirname + '/src/index.js', // 程序入口
devtool: config.devtool,
entry: config.entry,
output: {
path: __dirname + '/server',
filename: 'app.js',
},
eslint: {
configFile: __dirname + '/.eslintrc.js',
},
eslint: config.eslint,
module: {
loaders: [
{
test: /\.(json)$/,
exclude: /node_modules/,
loader: 'json',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel!eslint-loader',
},
{
test: /\.(?:png|jpg|gif)$/,
loader: 'url',
},
{
test: /\.css/,
loader: 'style!css?localIdentName=[local]-[hash:base64:5]',
},
{
test: /\.less/,
loader: 'style!css?modules&localIdentName=[local]-[hash:base64:5]!less',
},
],
},
plugins: [
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
]),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './server',
colors: true,
historyApiFallback: false,
port: 8080, // defaults to "8080"
hot: true, // Hot Module Replacement
inline: true, // Livereload
host: '0.0.0.0',
loaders: config.loaders
},
plugins: config.devPlugins,
devServer: config.devServer,
postcss: config.postcss
};
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var version = require('./package.json').version;
var config = require('./w.config');
// production环境配置
module.exports = {
devtool: 'source-map',// 生成source-map追踪js错误
entry: __dirname + '/src/index.js',// 程序入口
devtool: config.devtool,
entry: config.entry,
output: {
path: __dirname + '/build',
filename: 'app-'+version+'.js',
},
eslint: {
configFile: __dirname + '/.eslintrc.js'
filename: 'app-' + config.version+'.js',
},
eslint: config.eslint,
module: {
loaders: [
{
test: /\.(json)$/,
exclude: /node_modules/,
loader: 'json',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel!eslint-loader',
},
{
test: /\.(?:png|jpg|gif)$/,
loader: 'url?limit=8192', //小于8k,内嵌;大于8k生成文件
},
{
test: /\.less/,
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[hash:base64:4]!less'),
},
],
loaders: config.loaders
},
plugins:[
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
]),
new HtmlWebpackPlugin({
template: __dirname + '/server/index.tmpl.html'
}),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('css-' + version + '.css'),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
],
plugins: config.productionPlugins,
postcss: config.postcss
};
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册