完成CSS和图片字体的打包使用

common/component/layout/Header.css

@@ -0,0 +1,12 @@
+@font-face
+{
+  font-family: myFirstFont;
+  src: url('../../../client/assets/fonts/Roboto-Bold.ttf');
+}
+
+.name{
+  /*display:none;*/
+  /*background-color: red;*/
+  /*background-image: url('./assets/glasses.png')*/
+  font-family: myFirstFont
+}

common/component/page/Indexpage.jsx

@@ -59,7 +59,7 @@ class Indexpage extends Component {
         zDepth={0}
       >
         <Paper style={styles.avatarContainer} zDepth={1} circle={true}>
-          <img style={styles.avatar} src="img/avatar.jpg"/>
+          <img style={styles.avatar} src="uploadImg/avatar.jpg"/>
         </Paper>
         <h1 style={styles.siteIntro}>Hello Welcome to My Blog Site</h1>
         <Link to="/posts">

index.js

@@ -1,2 +1,20 @@
+require('babel-polyfill');
+//加载样式钩子，补足服务端渲染无法识别CSS文件的情况
+require('css-modules-require-hook')({
+    extensions: ['.css'],
+    generateScopedName: '[name]__[local]-[hash:base64:8]'
+});
+// Image required hook
+//引入asset-require-hook，来识别图片资源，对小于8K的图片转换成base64字符串，大于8k的图片转换成路径引用。
+require('asset-require-hook')({
+    extensions: ['jpg', 'png', 'gif','webp'],
+    limit: 10000
+});
+//处理字体
+require('asset-require-hook')({
+    extensions: ['ttf','woff','svg','eot','woff2'],
+    limit: 10000
+});
+
 //启动服务端脚本
 require('./server/server');

package.json

@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/BetaMee/ReactBlog#readme",
   "dependencies": {
+    "asset-require-hook": "^1.0.2",
     "config-lite": "^1.5.0",
     "connect-flash": "^0.1.1",
     "connect-mongo": "^1.3.2",
@@ -66,6 +67,7 @@
     "css-loader": "^0.26.1",
     "css-modules-require-hook": "^4.0.5",
     "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "^0.10.0",
     "isomorphic-style-loader": "^1.1.0",
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.3.1",
@@ -75,6 +77,7 @@
     "redux-devtools-log-monitor": "^1.2.0",
     "sass-loader": "^6.0.2",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-dev-server": "^2.4.1",

server/lib/view.js

@@ -32,6 +32,7 @@ function renderFullPage(html, initiaState,env) {
           <meta charset="UTF-8">
           <title>十二棵橡树</title>
           <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+          <link rel="stylesheet"  href="/assets/bundle.css">
           <style>
           body{
               margin:0px;
@@ -47,7 +48,7 @@ function renderFullPage(html, initiaState,env) {
           <script>
             window.__INITIAL_STATE__ = ${JSON.stringify(initiaState)};
           </script>
-          <script src="/js/client.bundle.js"></script>
+          <script src="/assets/client.bundle.js"></script>
         </body>
         </html>
     `;

server/public/assets/bundle.css

@@ -0,0 +1,12 @@
+@font-face
+{
+  font-family: myFirstFont;
+  src: url(/assets/bundleFonts/e31fcf18-Roboto-Bold.ttf);
+}
+
+.Header__name-2RC4N{
+  /*display:none;*/
+  /*background-color: red;*/
+  /*background-image: url('./assets/glasses.png')*/
+  font-family: myFirstFont
+}