chore: add example of mult style

shepherdwind · Feb 11, 2018 · 047876b · 047876b
1 parent bbe7ba5
commit 047876b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/examples/simple/dist/index.html b/examples/simple/dist/index.html
@@ -5,13 +5,16 @@
   <title>css hot loader example</title>
 
   <link rel="stylesheet" href="output.css">
+  <link rel="stylesheet" href="bar.css">
 </head>
 <body>
 
   <!-- React stuff -->
   <div id="root"> hello world</div>
+  <div class="bar">hello world bar</div>
 
   <script src="output.js"></script> <!-- webpack javascript output -->
+  <script src="bar.js"></script> <!-- webpack javascript output -->
 
 </body>
 </html>

diff --git a/examples/simple/src/bar.css b/examples/simple/src/bar.css
@@ -0,0 +1,5 @@
+.bar {
+  color: #ddd;
+  font-size: 50px;
+  text-align: center;
+}
diff --git a/examples/simple/src/bar.js b/examples/simple/src/bar.js
@@ -0,0 +1,2 @@
+console.log('bar inited');
+require('./bar.css');
diff --git a/examples/simple/src/index.css b/examples/simple/src/index.css
@@ -6,5 +6,5 @@ body {
   text-align: center;
   padding-top: 100px;
   color: #666;
-  font-size: 40px;
+  font-size: 30px;
 }
diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -5,6 +5,7 @@ const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); // requ
 let config = { // config object
   entry: {
     output: './src/index.js', // entry file
+    bar: './src/bar.js', // entry file
   },
   output: { // output
     path: path.resolve(__dirname, 'dist'), // ouput path
@@ -22,7 +23,7 @@ let config = { // config object
     ] // end rules
   },
   plugins: [ // webpack plugins
-    new ExtractTextWebpackPlugin('output.css'),
+    new ExtractTextWebpackPlugin('[name].css'),
   ],
   devServer: {
     contentBase: path.resolve(__dirname, 'dist'),