config url-loader

Author: likun7981

.flowconfig

@@ -12,5 +12,7 @@ module.name_mapper='\$styles' -> '<PROJECT_ROOT>/src/styles'
 module.name_mapper='\$containers' -> '<PROJECT_ROOT>/src/containers'
 module.name_mapper='\$reducers' -> '<PROJECT_ROOT>/src/reducers'
 module.name_mapper='\$layouts' -> '<PROJECT_ROOT>/src/layouts'
+module.name_mapper='\$images' -> '<PROJECT_ROOT>/src/assets/images'
+module.name_mapper='\$fonts' -> '<PROJECT_ROOT>/src/assets/fonts'
 module.file_ext=.css
 module.file_ext=.less

bin/compile.js

@@ -1,9 +1,7 @@
 const debug = require('debug')('app:bin:compile');
-const fs = require('fs-extra');
 const chalk = require('chalk');
 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 = () => {
@@ -15,7 +13,6 @@ const startCompile = () => {
         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 => {

build/base-config/configs.js

@@ -2,43 +2,35 @@ module.exports = {
   development: {
     performance: {
       hints: false,
-      maxAssetSize: 2000000 // 2.5M
-    }
+      maxAssetSize: 2000000, // 2.5M
+    },
   },
   production: {
     performance: {
       hints: 'error',
-      maxEntrypointSize: 1500000 // 1.5M
+      maxEntrypointSize: 1500000, // 1.5M
     },
     stats: {
       chunkModules: false,
       colors: true,
       chunks: false,
-      children: false
-    }
+      children: false,
+    },
   },
   defaults: {
     stats: {
       chunkModules: false,
       colors: true,
-      chunks: false
-    },
-    performance: {
-      hints: 'warning'
+      chunks: false,
     },
-    vendors: [
-      'react',
-      'react-redux',
-      'react-router-dom',
-      'redux',
-      'react-dom'
-    ],
+    hash: '[hash:8]',
+    vendors: ['react', 'react-redux', 'react-router-dom', 'redux', 'react-dom'],
     postcss: [
       require('autoprefixer')({
         add: true,
         remove: true,
-        browsers: ['last 2 versions']
-      })
-    ]
-  }
+        browsers: ['last 2 versions'],
+      }),
+    ],
+  },
 };

build/webpack-config/alias.js

@@ -7,6 +7,8 @@ module.exports = paths => ({
   '$components': paths.src('components'),
   '$containers': paths.src('containers'),
   '$styles': paths.src('styles'),
+  '$images': paths.src('assets/images'),
+  '$fonts': paths.src('assets/fonts'),
   '$reducers': paths.src('reducers'),
   '$layouts': paths.src('layouts'),
   '$flow-typed': paths.root('flow-typed'),

build/webpack-config/base.js

@@ -29,7 +29,7 @@ module.exports = paths => {
     },
     devtool: isDev ? 'source-map' : false,
     output: {
-      filename: '[name].[hash:8].js',
+      filename: `[name].${envConfig.hash}.js`,
       path: paths.dist(),
       publicPath: '',
     },

build/webpack-config/index.js

@@ -7,12 +7,15 @@ const loaders = require('./loaders')();
 const plugins = require('./plugins')(paths);
 
 debug('Creating configuration.');
-module.exports = Object.assign({
-  plugins,
-  resolve: {
-    alias
+module.exports = Object.assign(
+  {
+    plugins,
+    resolve: {
+      alias,
+    },
+    module: {
+      loaders,
+    },
   },
-  module: {
-    loaders
-  }
-}, base);
+  base
+);

build/webpack-config/loaders.js

@@ -17,6 +17,7 @@ module.exports = () => {
     },
     {
       test: /\.css$/,
+      include: /node_modules/,
       use: [
         {
           loader: 'style-loader',
@@ -25,16 +26,13 @@ module.exports = () => {
           loader: 'css-loader',
           options: {
             minimize: isProd,
-            module: true,
           },
         },
-        {
-          loader: 'postcss-loader',
-        },
       ],
     },
     {
-      test: /\.less$/,
+      test: /\.(less|css)$/,
+      exclude: /node_modules/,
       use: [
         {
           loader: 'style-loader',
@@ -44,6 +42,7 @@ module.exports = () => {
           options: {
             minimize: isProd,
             module: true,
+            camelCase: true,
           },
         },
         {
@@ -64,6 +63,8 @@ module.exports = () => {
           loader: 'url-loader',
           options: {
             limit: 8192,
+            useRelativePath: isProd,
+            name: `images/[name].${env.config.hash}.[ext]`,
           },
         },
       ],
@@ -73,9 +74,7 @@ module.exports = () => {
     debug('Apply ExtractTextPlugin to CSS loaders.');
     rules
       .filter(
-        rule =>
-          rule.use &&
-          rule.use.find(loaderObj => /css/.test(loaderObj.loader.split('?')[0]))
+        rule => rule.use && rule.use.find(loaderObj => /css/.test(loaderObj.loader.split('?')[0]))
       )
       .forEach(rule => {
         const first = rule.use[0];

build/webpack-config/plugins.js

@@ -14,7 +14,7 @@ module.exports = paths => {
     new HtmlWebpackPlugin({
       template: paths.src('index.html'),
       hash: false,
-      favicon: paths.src('static/favicon.ico'),
+      favicon: paths.src('favicon.ico'),
       filename: 'index.html',
       inject: 'body',
       minify: {
@@ -40,7 +40,7 @@ module.exports = paths => {
     debug('Apply ExtractTextPlugin.');
     plugins.push(
       new ExtractTextPlugin({
-        filename: '[name].[hash:8].css',
+        filename: `[name].${env.config.hash}.css`,
         allChunks: true,
       })
     );

jsconfig.json

@@ -3,27 +3,15 @@
         "experimentalDecorators": true,
         "baseUrl": "./",
         "paths": {
-            "$utils/*": [
-                "src/utils/*"
-            ],
-            "$components/*": [
-                "src/components/*"
-            ],
-            "$styles/*": [
-                "src/styles/*"
-            ],
-            "$containers/*": [
-                "src/containers/*"
-            ],
-            "$reducers/*": [
-                "src/reducers/*"
-            ],
-            "$layouts/*": [
-                "src/layouts/*"
-            ],
-            "$flow-typed/*": [
-                "flow-typed/*"
-            ]
+            "$utils/*": ["src/utils/*"],
+            "$components/*": ["src/components/*"],
+            "$styles/*": ["src/styles/*"],
+            "$images/*": ["src/assets/images/*"],
+            "$fonts/*": ["src/assets/fonts/*"],
+            "$containers/*": ["src/containers/*"],
+            "$reducers/*": ["src/reducers/*"],
+            "$layouts/*": ["src/layouts/*"],
+            "$flow-typed/*": ["flow-typed/*"]
         }
     }
 }

src/assets/fonts/.gitkeep

@@ -2,7 +2,7 @@ import React from 'react';
 import Header from '$components/Header';
 import RouteWithSubRoutes from '$components/RouteWithSubRoutes';
 import '$styles/core.less';
-import CoreLayoutModule from './CoreLayout.less';
+import { coreLayoutViewport } from './CoreLayout.less';
 import Counter from '../Counter';
 import type { StoreWithInjectAble, RouteProps } from '$self-define';
 type props = {
@@ -15,10 +15,8 @@ const CoreLayout = (props: props) => {
     <div className="container text-center">
       <Counter />
       <Header />
-      <div className={CoreLayoutModule['core-layout__viewport']}>
-        {props
-          .routes(props.store)
-          .map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
+      <div className={coreLayoutViewport}>
+        {props.routes(props.store).map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
       </div>
     </div>
   );

src/static/images/magic.png renamed to src/assets/images/magic.png

@@ -1,14 +1,11 @@
 // @flow
 import React from 'react';
-import HomeViewLess from './HomeView.less';
+import { magic } from './HomeView.less';
+import logo from '$images/magic.png';
 export const HomeView = () => (
   <div>
     <h4>Welcome!</h4>
-    <img
-      alt="A magic!"
-      className={HomeViewLess.magic}
-      src="/images/magic.png"
-    />
+    <img alt="A magic!" className={magic} src={logo} />
   </div>
 );
 

src/static/favicon.ico renamed to src/favicon.ico

@@ -1,4 +1,3 @@
-@import 'base';
 @import (less) '~normalize.css/normalize.css';
 
 // Some best-practice CSS that's useful for most apps

src/layouts/CoreLayout/CoreLayout.js

@@ -0,0 +1,3 @@
+/*
+Mixins here;
+*/