兼容 post-css-pxtorem

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwp",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "description": "Angular 1.x.x scaffold (Webpack, AngularJS 1.6.3, ES6, SCSS, Pug)",
   "homepage": "https://github.com/DavidKk/ngwp",
@@ -92,6 +92,7 @@
     "offline-plugin": "^4.8.5",
     "phantomjs-prebuilt": "^2.1.16",
     "postcss-loader": "^2.0.9",
+    "postcss-pxtorem": "^4.0.1",
     "pug-loader": "^2.3.0",
     "rimraf": "^2.6.0",
     "sass-loader": "^6.0.2",

src/config/karma.conf.babel.js

@@ -46,8 +46,32 @@ export default function (config) {
     ],
     webpack: WebpackConf,
     webpackMiddleware: {
+      // It suppress error shown in console, so it has to be set to false.
+      quiet: false,
+      // It suppress everything except error, so it has to be set to false as well
+      // to see success build.
       noInfo: false,
-      stats: true
+      stats: {
+        // only warning and error informations
+        // docs: https://webpack.js.org/configuration/stats/
+        colors: true,
+        warnings: true,
+        errors: true,
+        errorDetails: true,
+
+        version: false,
+        assets: false,
+        cached: false,
+        cachedAssets: false,
+        modules: false,
+        moduleTrace: false,
+        chunks: false,
+        chunkModules: false,
+        chunkOrigins: false,
+        children: false,
+        hash: false,
+        timings: false
+      }
     },
     /**
      * in empty test folder, it will return

src/config/webpack.common.config.babel.js

@@ -1,6 +1,7 @@
 import fs from 'fs-extra'
 import path from 'path'
 import map from 'lodash/map'
+import clone from 'lodash/clone'
 import assign from 'lodash/assign'
 import without from 'lodash/without'
 import isArray from 'lodash/isArray'
@@ -9,7 +10,8 @@ import forEach from 'lodash/forEach'
 import isObject from 'lodash/isObject'
 import filter from 'lodash/filter'
 import defaults from 'lodash/defaults'
-import autoprefixer from 'autoprefixer'
+import Autoprefixer from 'autoprefixer'
+import PxToRem from 'postcss-pxtorem'
 import webpack from 'webpack'
 import CleanWebpackPlugin from 'clean-webpack-plugin'
 import SpritesmithTemplate from 'spritesheet-templates'
@@ -20,12 +22,37 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ManifestPlugin from 'webpack-manifest-plugin'
-import { name as projectName, execDir, rootDir, srcDir, distDir, tmpDir, publicPath, variables, modules as Modules } from '../share/configuration'
+import { name as projectName, execDir, rootDir, srcDir, distDir, tmpDir, publicPath, variables, modules as Modules, plugins as PluginsOptions } from '../share/configuration'
 
 const DefinePlugin = webpack.DefinePlugin
 const { CommonsChunkPlugin } = webpack.optimize
 const GlobalVariables = defaults({ publicPath: JSON.stringify(publicPath) }, variables)
 
+let PostCssPlugins = [
+  Autoprefixer({
+    browsers: [
+      'last 10 version',
+      'ie >= 9'
+    ]
+  })
+]
+
+forEach(PluginsOptions, ({ name, options }) => {
+  if (name === 'postcss-pxtorem') {
+    options = defaults({}, options, {
+      rootValue: 16,
+      unitPrecision: 5,
+      propList: ['*'],
+      selectorBlackList: ['html'],
+      replace: false,
+      mediaQuery: false,
+      minPixelValue: 0
+    })
+
+    PostCssPlugins.push(PxToRem(options))
+  }
+})
+
 /**
  * Entries definitions
  */
@@ -135,26 +162,12 @@ export const Rules = [
       }
     ]
   },
-  {
-    test: /\.css$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        {
-          loader: 'css-loader',
-          options: {
-            minimize: true
-          }
-        }
-      ]
-    })
-  },
   /**
    * docs:
    * - https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/263
    */
   {
-    test: /\.(sass|scss)$/,
+    test: /\.(sass|s?css)$/,
     use: ExtractTextPlugin.extract({
       fallback: 'style-loader',
       use: [
@@ -174,14 +187,7 @@ export const Rules = [
         {
           loader: 'postcss-loader',
           options: {
-            plugins: [
-              autoprefixer({
-                browsers: [
-                  'last 10 version',
-                  'ie >= 9'
-                ]
-              })
-            ]
+            plugins: PostCssPlugins
           }
         }
       ]
@@ -229,10 +235,7 @@ export const Rules = [
   }
 ]
 
-/**
- * Webpack Setting
- */
-export default {
+let WebpackDefaultSettings = {
   entry: Entries,
   output: {
     path: distDir,
@@ -255,6 +258,18 @@ export default {
   plugins: Plugins
 }
 
+let rootConfigFile = path.join(rootDir, 'webpack.ngwp.config.babel.js')
+if (fs.existsSync(rootConfigFile)) {
+  let options = fs.readJSONSync(path.join(execDir, '.babelrc'))
+  require('babel-register', options)
+  WebpackDefaultSettings = require(rootConfigFile).default(clone(WebpackDefaultSettings))
+}
+
+/**
+ * Webpack Setting
+ */
+export default WebpackDefaultSettings
+
 /**
  * Auto generate entries
  * Generate entries dependent on folder (src/entry/{folder})

src/config/webpack.unitest.config.babel.js

@@ -5,7 +5,7 @@ import WebpackConfig from './webpack.common.config.babel'
 const DefinePlugin = webpack.DefinePlugin
 
 export default WebpackMerger(WebpackConfig, {
-  devtool: 'inline-source-map',
+  devtool: 'inline',
   stats: 'errors-only',
   plugins: [
     /**

src/share/configuration.js

@@ -28,3 +28,4 @@ export const port = rcSettings.port || 8080
 export const publicPath = rcSettings.publicPath
 export const variables = mapValues(rcSettings.variables, JSON.stringify)
 export const modules = rcSettings.modules || []
+export const plugins = rcSettings.plugins || []