webpack 打包分离css

Author: closertb

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+*/dist/**
 .idea/
 .vscode/
 .idea/vcs.xml

Klotski/date.html

@@ -14,15 +14,9 @@ export default function ShadowBox(props) {
         '4':[40000,120000,200000],
         '5':[100000,600000,1000000]
 
-    },path={
-        pathname: '/simple',
-        query: {
-            level: props.level
-        }
-    };
+    },path = '/simple?level='+props.level;
     let word ='';
     if(props.isSuccess){
-        console.log('pass',props.timePass);
         const records = jokers[props.level];
         if(props.timePass < records[0]){
             word ='大神啊，快膜拜 ！';

Klotski/src/js/component/shadow.js

@@ -54,7 +54,7 @@ export default class Game extends React.Component {
     }
     timer(offsetTime){
         const formatter=(t)=>{
-            const res =t>9 ? t : '0'+t
+            const res =t>9 ? t : '0'+t;
             return res;
         }
         let startTime = new Date().getTime(),tPass=0,tOffset=offsetTime||0;

Klotski/src/js/page/game.js

@@ -21,12 +21,13 @@ export default class Home extends React.Component {
             }
         }
         selectIndex(e){
-            const path = {
+/*            const path = {
                 pathname: '/simple',
                     query: {
                     level: e
                 }
-            }
+            }*/
+            const path = '/simple?level='+e;
             this.props.history.push(path);
         }
         closePicker(){
@@ -36,37 +37,17 @@ export default class Home extends React.Component {
                this.setState({showPiker:true})
         }
         render() {
-            const routes = {
-                level3: {
-                    pathname: '/simple',
-                    query: {
-                        level: 3
-                    }
-                },
-                level4: {
-                    pathname: '/simple',
-                    query: {
-                        level: 4
-                    }
-                },
-                level5: {
-                    pathname: '/simple',
-                    query: {
-                        level: 5
-                    }
-                }
-            }
             return (
                 <div className="home-page">
                     <h3><span>欢迎来到</span></h3>
                     <h2><span>数字华容道</span></h2>
                     <ul className="level-items">
-                        <li><Link to={routes.level3}>3x3</Link></li>
-                        <li><Link to={routes.level4}>4x4</Link></li>
-                        <li><Link to={routes.level5}>5x5</Link></li>
+                        <li><Link to='/simple?level=3'>3x3</Link></li>
+                        <li><Link to='/simple?level=4'>4x4</Link></li>
+                        <li><Link to='/simple?level=5'>5x5</Link></li>
                         <li onClick={this.showPicker}>更<span>多...</span></li>
                     </ul>
-                    <a herf="http://closertb.site/" className="about">
+                    <a href="http://closertb.site/" className="about">
                         <svg>
                             <use xlinkHref="#aboutIcon"></use>
                         </svg>

Klotski/src/js/page/home.js

@@ -20,11 +20,18 @@ function Status(props) {
         </div>
     );
 }
-
+const  translateKey =(str)=>{
+    var arr = str.substr(1).split('&'),res={};
+    arr.forEach((t)=>{
+        let couple = t.split('=');
+        res[couple[0]] = couple[1];
+    });
+    return res;
+}
 export default class Simple extends React.Component {
     constructor(props) {
         super(props);
-        this.level = this.props.location.query.level;
+        this.level = +translateKey(this.props.location.search).level;
         this.length = this.level * this.level;
         this.state = {
             level: this.level,
@@ -37,7 +44,6 @@ export default class Simple extends React.Component {
 
     handleClick(dir, index) {
     };
-
     render() {
         const link = {
             pathname: '/game',

Klotski/src/js/page/simple.js

@@ -1,7 +1,8 @@
 const path = require('path');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-//const ExtractTextPlugin = reqire('extract-text-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 const webpack = require('webpack');
 module.exports = {
     entry:  './src/js/index.js',
@@ -34,22 +35,17 @@ module.exports = {
                 }
             },{
                 test: /\.scss$/,
-                use: [
-                    'style-loader',
-                    'css-loader',
-                    'sass-loader']
-/*                ,
                 use: ExtractTextPlugin.extract({
-                    fallback: "style-loader", // 编译后用什么loader来提取css文件
-                    use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
-                })*/
+                    use: ['css-loader', 'sass-loader'],
+                    fallback: "style-loader"
+                })
             }
 
         ]
     },
     plugins: [
         new CleanWebpackPlugin(['dist']),
-   //     new ExtractTextPlugin("style.css"),
+        new ExtractTextPlugin("index.css"),
         new HtmlWebpackPlugin({template: './index.html'})
     ],
 };