add post css

Author: likun7981

.eslintignore

@@ -1,2 +1,2 @@
 node_modules/*
-build/*
+dist/*

bin/compile.js

@@ -0,0 +1,34 @@
+const debug = require('debug')('app:bin:compile');
+const fs = require('fs-extra');
+const compiler = require('../build/compiler');
+const env = require('../build/base-config/environment');
+const paths = require('../build/base-config/path');
+const webpackConfig = require('../build/webpack-config');
+
+const startCompile = () => {
+  debug(`Start compile with env '${process.env.NODE_ENV}'`);
+  return Promise.resolve()
+    .then(() => compiler(webpackConfig))
+    .then((stats) => {
+      if (stats.hasWarnings() && env.__PROD__) { // eslint-disable-line
+        throw new Error('Production not allow warnig, exit .');
+      }
+      debug('Copying static assets to dist folder.');
+      fs.copySync(paths.public(), paths.dist());
+      return stats;
+    })
+    .then((stats) => {
+      debug(stats.toString(env.config.stats));
+      debug('Success compile !!');
+    })
+    .catch((error) => {
+      debug('Compile with Error.', error);
+      process.exit();
+    });
+};
+
+// =====
+// go!
+// =====
+
+startCompile();

build/base-config/configs.js

@@ -0,0 +1,50 @@
+const cssnano = require('cssnano');
+
+module.exports = {
+  development: {
+    performance: {
+      hints: false,
+      maxAssetSize: 2000000
+    }
+  },
+  production: {
+    performance: {
+      hints: 'error',
+      maxEntrypointSize: 1500000
+    }
+  },
+  defaults: {
+    stats: {
+      chunkModules: false,
+      colors: true,
+      chunks: false
+    },
+    performance: {
+      hints: 'warning'
+    },
+    vendors: [
+      'react',
+      'react-redux',
+      'react-router',
+      'redux',
+      'react-dom'
+    ],
+    postcss: [
+      cssnano({
+        autoprefixer: {
+          add: true,
+          remove: true,
+          browsers: ['last 2 versions']
+        },
+        discardComments: {
+          removeAll: true
+        },
+        discardUnused: false,
+        mergeIdents: false,
+        reduceIdents: false,
+        safe: true,
+        sourcemap: true
+      })
+    ]
+  }
+};

build/base-config/environment.js

@@ -1,9 +1,16 @@
-
 const NODE_ENV = process.env.NODE_ENV || 'development';
+const envConfigs = require('./configs');
 
 module.exports = {
-  'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
-  __DEV__: NODE_ENV === 'development',
-  __PROD__: NODE_ENV === 'production',
-  __TEST__: NODE_ENV === 'test',
+  /**
+   * why? https://fb.me/react-minification ,http://stackoverflow.com/questions/30030031
+   */
+  'process.env': {
+    NODE_ENV: JSON.stringify(NODE_ENV)
+  },
+  env: NODE_ENV,
+  isDev: NODE_ENV === 'development',
+  isProd: NODE_ENV === 'production',
+  isTest: NODE_ENV === 'test',
+  config: Object.assign(envConfigs.defaults, envConfigs[NODE_ENV] || {})
 };

build/base-config/path.js

@@ -3,8 +3,8 @@ const path = require('path');
 const ROOT_PATH = path.resolve(__dirname, '../..');
 
 function base() {
-  const args = [ROOT_PATH].concat([].slice.call(arguments));
-  return path.resolve.apply(path, args);
+  const args = [ROOT_PATH].concat([].slice.call(arguments)); // eslint-disable-line
+  return path.resolve.apply(path, args); // eslint-disable-line
 }
 
 module.exports = {

build/compiler.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack');
+const debug = require('debug')('app:build:compiler');
+const chalk = require('chalk');
+
+const webpackCompiler = (webpackConfig) => {
+  const compile = webpack(webpackConfig);
+  return new Promise((resolve, reject) => {
+    compile.run((err, stats) => {
+      if (err) {
+        debug('Webpack compiler with a fatal error.', err);
+        return reject(err);
+      }
+      const jsonStats = stats.toJson();
+      if (stats.hasErrors()) {
+        debug('Webpack compiler with some errors.');
+        debug(chalk.red(jsonStats.errors.join('\n')));
+        return reject(new Error('Webpack compiler with some errors.'));
+      } else if (stats.hasWarnings()) {
+        debug('Webpack compiler with some warnings.');
+        debug(chalk.yellow(jsonStats.warnings.join('\n')));
+      } else {
+        debug('Webpack compiler no Errors or no Warnings');
+      }
+      return resolve(stats);
+    });
+  });
+};
+
+module.exports = webpackCompiler;

build/server.js

@@ -1,43 +1,36 @@
 const express = require('express');
-const debug = require('debug')('app:server');
-const webpack = require('webpack');
-
+const debug = require('debug')('app:build:server');
 const env = require('./base-config/environment');
 const paths = require('./base-config/path');
 
-const webpackConfig = require('./webpack-config');
 const app = express();
 
 // This rewrites all routes requests to the root /index.html file
-app.use(require('connect-history-api-fallback')())
+app.use(require('connect-history-api-fallback')());
 
 // Apply gzip compression
-app.use(require('compression')())
+app.use(require('compression')());
 
 // ------------------------------------
 // Apply Webpack HMR Middleware
 // ------------------------------------
-if (env.__DEV__) {
-  const compiler = webpack(webpackConfig)
-  debug('Enable webpack dev and HMR middleware(开启开发环境插件 webpack-dev 和 HRM 中间件)')
+if (env.isDev) {
+  const webpack = require('webpack');
+  const webpackConfig = require('./webpack-config');
+  const compiler = webpack(webpackConfig);
+  debug('Enable webpack dev and HMR middleware(开启开发环境插件 webpack-dev 和 HRM 中间件)');
   app.use(require('webpack-dev-middleware')(compiler, {
     publicPath: webpackConfig.output.publicPath,
     contentBase: paths.src(),
     lazy: false,
-    stats: {
-      chunkModules: false,
-      colors: true,
-      chunks: false
-    }
-  }))
-  app.use(require('webpack-hot-middleware')(compiler))
+    stats: env.config.stats
+  }));
+  app.use(require('webpack-hot-middleware')(compiler));
 
-  app.use(express.static(paths.public()))
+  app.use(express.static(paths.public()));
 } else {
-  debug(
-    'Server is being run outside of live development mode ! ' +
-  )
-  app.use(express.static(paths.dist()))
+  debug('Server is being run outside of live development mode !');
+  app.use(express.static(paths.dist()));
 }
 
 module.exports = app;

build/webpack-config/base.js

@@ -1,42 +1,36 @@
 const debug = require('debug')('app:webpack:base');
 const env = require('../base-config/environment');
 
-const __DEV__ = env.__DEV__;
+const isDev = env.isDev;
+const envConfig = env.config;
 
 const pkg = require('../../package.json');
 
 module.exports = (paths) => {
   const App = [paths.src('main.js')];
-  const Vendors = [
-    'react',
-    'react-redux',
-    'react-router',
-    'redux',
-    'react-dom'
-  ].filter((dep) => {
+  const Vendors = envConfig.vendors.filter((dep) => {
     if (pkg.dependencies[dep]) return true;
     return debug(
       `Package "${dep}" was not found as an npm dependency in package.json; ` +
       `it won't be included in the webpack vendor bundle.
        Consider removing it from "Vendors" in this file`
     );
   });
-  if (__DEV__) {
+  if (isDev) {
     App.unshift('webpack-hot-middleware/client');
   }
   return {
     context: paths.root(),
-    entry_vendors: Vendors,
-    entry_app: App,
-    devtool: __DEV__ ? 'eval' : 'cheap-source-map',
+    entry: {
+      app: App,
+      vendors: Vendors
+    },
+    devtool: isDev ? 'eval' : 'cheap-source-map',
     output: {
       filename: '[name].[hash:8].js',
       path: paths.dist(),
       publicPath: '/'
     },
-    performance: {
-      hints: false,
-      maxAssetSize: 2000000,
-    }
+    performance: env.config.performance
   };
 };

build/webpack-config/index.js

@@ -7,20 +7,12 @@ const loaders = require('./loaders')();
 const plugins = require('./plugins')(paths);
 
 debug('Creating configuration.(创建配置)');
-module.exports = {
-  entry: {
-    app: base.entry_app,
-    vendors: base.entry_vendors
-  },
-  output: base.output,
+module.exports = Object.assign({
+  plugins,
   resolve: {
     alias
   },
-  devtool: base.devtool,
   module: {
     loaders
-  },
-  performance: base.performance,
-  devServer: base.devServer,
-  plugins
-};
+  }
+}, base);

build/webpack-config/loaders.js

@@ -2,7 +2,7 @@ const debug = require('debug')('app:webpack:loaders');
 const env = require('../base-config/environment');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-const __DEV__ = env.__DEV__; // eslint-disable-line 
+const isDev = env.isDev;
 module.exports = () => {
   const loaders = [{
     test: /\.(js|jsx)$/,
@@ -13,10 +13,10 @@ module.exports = () => {
     loader: 'json-loader'
   }, {
     test: /\.css$/,
-    loaders: ['style-loader', 'css-loader']
+    loaders: ['style-loader', 'css-loader', 'postcss-loader']
   }, {
     test: /\.less$/,
-    loaders: ['style-loader', 'css-loader', 'less-loader']
+    loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
   }, {
     test: /\.woff(\?.*)?$/,
     loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
@@ -39,12 +39,12 @@ module.exports = () => {
     test: /\.(png|jpg)$/,
     loader: 'url-loader?limit=8192'
   }];
-  if (!__DEV__) {
+  if (!isDev) {
     debug('Apply ExtractTextPlugin to CSS loaders.(非开发环境应用ExtractTextPluginLoaders到css loaders)');
     loaders.filter(loader => loader.loaders && loader.loaders.find(name => /css/.test(name.split('?')[0]))).forEach((loader) => {
       const first = loader.loaders[0];
       const rest = loader.loaders.slice(1);
-      loader.loader = ExtractTextPlugin.extract(first, rest.join('!'));
+      loader.loader = ExtractTextPlugin.extract({ fallbackLoader: first, loader: rest.join('!') });
       delete loader.loaders;
     });
   }

build/webpack-config/plugins.js

@@ -4,8 +4,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const env = require('../base-config/environment');
 
-const __DEV__ = env.__DEV__;
-const __PROD__ = env.__PROD__;
+const isDev = env.isDev;
+const isProd = env.isProd;
 
 module.exports = (paths) => {
   const plugins = [
@@ -21,28 +21,33 @@ module.exports = (paths) => {
       }
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      names: ['common']
+      names: ['vendors']
+    }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: env.config.postcss
+      }
     })
   ];
-  if (__DEV__) {
+  if (isDev) {
     debug('Enable HMR,noErrors for development(开启开发环境插件)');
     plugins.push(
       new webpack.HotModuleReplacementPlugin(),
-      new webpack.NoErrorsPlugin() //报错时不退出webpack进程
+      new webpack.NoErrorsPlugin() // 报错时不退出webpack进程
     );
   } else {
     debug('Apply ExtractTextPlugin.(非开发环境开启ExtractTextPlugin)');
     plugins.push(
-      new ExtractTextPlugin('[name].[contenthash].css', {
+      new ExtractTextPlugin({
+        filename: '[name].[hash:8].css',
         allChunks: true
       })
     );
   }
-  if (__PROD__) {
-    debug('Enable OccurenceOrder,Dedupe,UglifyJs for production(开启生产环境打包插件)');
+  if (isProd) {
+    debug('Enable OccurenceOrder,UglifyJs for production(开启生产环境打包插件)');
     plugins.push(
-      new webpack.optimize.OccurrenceOrderPlugin(), //根据模块使用情况 排序模块序号
-      new webpack.optimize.DedupePlugin(), //避免重复模块
+      new webpack.optimize.OccurrenceOrderPlugin(), // 根据模块使用情况 排序模块序号
       new webpack.optimize.UglifyJsPlugin({
         compress: {
           unused: true,