Upgrade webpack to 2 & react to 15.5.0 & use html5 history

kokororin · Apr 15, 2017 · 3041717 · 3041717
1 parent 6ba94db
commit 3041717
Show file tree

Hide file tree

Showing 44 changed files with 2,311 additions and 2,105 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,19 +1,13 @@
 {
   "presets": [
-    "es2015",
+    ["es2015", { "modules": false }],
     "react",
     "stage-0"
   ],
   "plugins": [
   	"transform-async-to-generator",
   	"transform-decorators-legacy",
-    "transform-object-assign"
-  ],
-  "env": {
-    "dist": {
-      "plugins": [
-        "transform-react-remove-prop-types"
-      ]
-    }
-  }
+    "transform-object-assign",
+    "react-hot-loader/babel"
+  ]
 }
diff --git a/.travis.yml b/.travis.yml
@@ -9,7 +9,7 @@ before_install:
   - sh -e /etc/init.d/xvfb start
 
 before_script:
-  - npm install
+  - yarn
 
 script:
   - npm test
@@ -18,4 +18,4 @@ after_script:
   - npm run coverage
 
 after_success:
-  - npm run ci-publish || true
+  - npm run ci-publish || true
diff --git a/build/webpack.config.base.js b/build/webpack.config.base.js
@@ -1,54 +1,51 @@
 const path = require('path');
 const webpack = require('webpack');
-const BowerWebpackPlugin = require('bower-webpack-plugin');
 
 const srcPath = path.join(__dirname, '/../src');
 
 module.exports = {
-    output: {
-        path: path.join(__dirname, '/../dist/assets'),
-        filename: 'bundle.js',
-        publicPath: '/assets/'
-    },
-    resolve: {
-        extensions: ['', '.js', '.jsx'],
-        alias: {
-            actions: `${srcPath}/actions/`,
-            components: `${srcPath}/components/`,
-            containers: `${srcPath}/containers/`,
-            reducers: `${srcPath}/reducers/`,
-            sources: `${srcPath}/sources/`,
-            stores: `${srcPath}/stores/`,
-            styles: `${srcPath}/styles/`,
-            config: `${srcPath}/config/base`,
-            'react/lib/ReactMount': 'react-dom/lib/ReactMount'
-        }
-    },
-    module: {
-        loaders: [{
-            test: /\.css$/,
-            loader: 'style-loader!css-loader?outputStyle=expanded'
-        }, {
-            test: /\.sass/,
-            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
-        }, {
-            test: /\.scss/,
-            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
-        }, {
-            test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)(\?|\?[a-z0-9]+)?$/,
-            loader: 'url-loader?limit=8192'
-        }, {
-            test: /\.(mp4|ogg)$/,
-            loader: 'file-loader'
-        }, {
-            test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
-            loader: 'imports?define=>false&this=>window'
-        }]
-    },
-    plugins: [
-        new webpack.NoErrorsPlugin(),
-        new BowerWebpackPlugin({
-            searchResolveModulesDirectories: false
-        })
-    ]
+  output: {
+    path: path.join(__dirname, '/../dist/assets'),
+    filename: 'bundle.js',
+    publicPath: '/assets/'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      '@': path.join(__dirname, '/../src')
+    }
+  },
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      enforce: 'pre',
+      include: path.join(__dirname, '/../src'),
+      loader: 'eslint-loader'
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader?outputStyle=expanded'
+    }, {
+      test: /\.sass/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+    }, {
+      test: /\.scss/,
+      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+    }, {
+      test: /\.(js|jsx)$/,
+      loader: 'babel-loader',
+      include: [].concat([path.join(__dirname, '/../src')])
+    }, {
+      test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)(\?|\?[a-z0-9]+)?$/,
+      loader: 'url-loader?limit=8192'
+    }, {
+      test: /\.(mp4|ogg)$/,
+      loader: 'file-loader'
+    }, {
+      test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
+      loader: 'imports-loader?define=>false&this=>window'
+    }]
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin()
+  ]
 };
diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
@@ -1,49 +1,34 @@
 const path = require('path');
 const webpack = require('webpack');
 const OpenBrowserPlugin = require('open-browser-webpack-plugin');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 
 module.exports = {
-    devServer: {
-        contentBase: './src/',
-        historyApiFallback: true,
-        inline: true,
-        port: 23333,
-        publicPath: '/assets/',
-        noInfo: false,
-        stats: {
-            colors: true
-        },
-        quiet: true
-    },
-    entry: [
-        'babel-polyfill',
-        'webpack-dev-server/client?http://127.0.0.1:23333',
-        'webpack/hot/only-dev-server',
-        'es6-promise',
-        'whatwg-fetch',
-        './src/index'
-    ],
-    cache: true,
-    devtool: 'eval',
-    module: {
-        preLoaders: [{
-            test: /\.(js|jsx)$/,
-            include: path.join(__dirname, '/../src'),
-            loader: 'eslint-loader'
-        }],
-        loaders: [{
-            test: /\.(js|jsx)$/,
-            loader: 'react-hot!babel-loader',
-            include: [].concat([path.join(__dirname, '/../src')])
-        }]
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': '"development"'
-        }),
-        new webpack.NoErrorsPlugin(),
-        new FriendlyErrorsPlugin(),
-        new OpenBrowserPlugin({ url: 'http://localhost:23333' })
-    ]
+  devServer: {
+    contentBase: './src/',
+    historyApiFallback: true,
+    inline: true,
+    port: 23333,
+    publicPath: '/assets/',
+    noInfo: false,
+    stats: {
+      colors: true
+    }
+  },
+  entry: [
+    'babel-polyfill',
+    'react-hot-loader/patch',
+    'webpack-dev-server/client?http://127.0.0.1:23333',
+    'webpack/hot/only-dev-server',
+    'whatwg-fetch',
+    './src/index'
+  ],
+  cache: true,
+  devtool: 'eval',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"development"'
+    }),
+    new OpenBrowserPlugin({ url: 'http://localhost:23333' }),
+    new webpack.HotModuleReplacementPlugin()
+  ]
 };
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -10,20 +10,20 @@ const allowedEnvs = ['development', 'production'];
 
 
 function buildConfig(wantedEnv) {
-    const isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
-    const validEnv = isValid ? wantedEnv : 'development';
-    process.env.NODE_ENV = validEnv;
-    process.env.BABEL_ENV = validEnv;
+  const isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
+  const validEnv = isValid ? wantedEnv : 'development';
+  process.env.NODE_ENV = validEnv;
+  process.env.BABEL_ENV = validEnv;
 
-    let config;
-    if (validEnv === 'production') {
-        config = prodConfig;
-    } else {
-        config = devConfig;
-    }
+  let config;
+  if (validEnv === 'production') {
+    config = prodConfig;
+  } else {
+    config = devConfig;
+  }
 
-    config = merge(baseConfig, config);
-    return config;
+  config = merge(baseConfig, config);
+  return config;
 }
 
 module.exports = buildConfig(process.env.NODE_ENV);
diff --git a/build/webpack.config.prod.js b/build/webpack.config.prod.js
@@ -5,64 +5,54 @@ const minify = require('html-minifier').minify;
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
-    entry: [
-        'babel-polyfill',
-        'es6-promise',
-        'whatwg-fetch',
-        path.join(__dirname, '../src/index')
-    ],
-    output: {
-        path: path.join(__dirname, '/../dist/assets'),
-        filename: 'bundle.js',
-        publicPath: '/assets/'
-    },
-    cache: false,
-    devtool: 'cheap-module-inline-source-map',
-    module: {
-        loaders: [{
-            test: /\.(js|jsx)$/,
-            loader: 'babel-loader',
-            include: [].concat([path.join(__dirname, '/../src')])
-        }]
-    },
-    plugins: [
-        new webpack.optimize.DedupePlugin(),
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': '"production"'
-        }),
-        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false,
-                drop_console: true
-            },
-            beautify: false,
-            comments: false
-        }),
-        new webpack.optimize.OccurenceOrderPlugin(),
-        new webpack.optimize.AggressiveMergingPlugin(),
-        new BundleAnalyzerPlugin({
-            analyzerMode: 'static',
-            reportFilename: path.join(__dirname, '/../dist/report.html'),
-            openAnalyzer: false,
-            generateStatsFile: false
-        }),
-        function() {
-            this.plugin('done', function(statsData) {
-                let stats = statsData.toJson();
-                if (!stats.errors.length) {
-                    let htmlFileNames = ['/../dist/index.html', '/../dist/404.html'];
-                    htmlFileNames.map(function(htmlFileName) {
-                        let htmlFilePath = path.join(__dirname, htmlFileName);
-                        let html = fs.readFileSync(htmlFilePath, 'utf8');
+  entry: [
+    'babel-polyfill',
+    'whatwg-fetch',
+    path.join(__dirname, '../src/index')
+  ],
+  output: {
+    path: path.join(__dirname, '/../dist/assets'),
+    filename: 'bundle.js',
+    publicPath: '/assets/'
+  },
+  cache: false,
+  devtool: 'cheap-module-inline-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    }),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        drop_console: true
+      },
+      beautify: false,
+      comments: false
+    }),
+    new webpack.optimize.AggressiveMergingPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: path.join(__dirname, '/../dist/report.html'),
+      openAnalyzer: false,
+      generateStatsFile: false
+    }),
+    function() {
+      this.plugin('done', function(statsData) {
+        let stats = statsData.toJson();
+        if (!stats.errors.length) {
+          let htmlFileNames = ['/../dist/index.html', '/../dist/404.html'];
+          htmlFileNames.map(function(htmlFileName) {
+            let htmlFilePath = path.join(__dirname, htmlFileName);
+            let html = fs.readFileSync(htmlFilePath, 'utf8');
 
-                        // let htmlOutput = html.replace(
-                        //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
-                        //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
+            // let htmlOutput = html.replace(
+            //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
+            //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
 
-                        let htmlOutput = html.replace(
-                            /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
-                            `<script type="text/javascript">
+            let htmlOutput = html.replace(
+              /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
+              `<script type="text/javascript">
 (function(hash, src, localStorage, document, window) {
   var createScript = function(url) {
     var script = document.createElement("script");
@@ -106,20 +96,20 @@ module.exports = {
 })("${stats.hash}", "$2${stats.assetsByChunkName.main}?${stats.hash}", window.localStorage, document, window);
 </script>`);
 
-                        htmlOutput = minify(htmlOutput, {
-                            collapseWhitespace: true,
-                            removeComments: true,
-                            minifyJS: true,
-                            minifyCSS: true,
-                            processConditionalComments: true
-                        });
+            htmlOutput = minify(htmlOutput, {
+              collapseWhitespace: true,
+              removeComments: true,
+              minifyJS: true,
+              minifyCSS: true,
+              processConditionalComments: true
+            });
 
-                        fs.writeFileSync(htmlFilePath, htmlOutput);
-                    });
+            fs.writeFileSync(htmlFilePath, htmlOutput);
+          });
 
 
-                }
-            });
         }
-    ]
+      });
+    }
+  ]
 };