optimize webpack configuration

2017-02-06 16:08:16 +08:00 · 2017-02-06 16:08:16 +08:00 · fb1ae7b1d5
commit fb1ae7b1d5
parent 91afc69173
10 changed files with 158 additions and 139 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,21 +1,3 @@
 {
-  "presets":["react","es2015"],
-  "env":{
-    "development":{
-      "plugins":[
-        [
-          "react-transform",
-          {
-            "transforms":[
-              {
-                "transform":"react-transform-hmr",
-                "imports":["react"],
-                "locals":["module"]
-              }
-            ]
-          }
-        ]
-      ]
-    }
-  }
+  "presets": ["react", "es2015"]
 }
--- a/README-EN.md
+++ b/README-EN.md
@ -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.

--- a/README.md
+++ b/README.md
@ -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文件夹下生成结果。

--- a/build/app-1.0.0.js
+++ b/build/app-1.0.0.js
--- a/build/app-1.0.0.js.map
+++ b/build/app-1.0.0.js.map
--- a/package.json
+++ b/package.json
@ -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",
--- a/server/index.html
+++ b/server/index.html
@ -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">
--- a/w.config.js
+++ b/w.config.js
@ -0,0 +1,120 @@
+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
+};
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,58 +1,18 @@
-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
 };
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@ -1,55 +1,17 @@
-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
 };