Upgrade to webpack 2

docs/index.html

@@ -41,5 +41,5 @@
         </div>
     </nav>
     <div id="container"></div>
-<script type="text/javascript" src="bundle.js?f05d747fa7dabbd86685"></script></body>
+<script type="text/javascript" src="bundle.js?c5b65a059b9f1cc2ab8d"></script></body>
 </html>

examples/webpack.config.js

@@ -1,83 +1,98 @@
 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var stylusLoader = require('stylus-loader');
 var nib = require('nib');
 
 module.exports = {
-    debug: true,
     devtool: 'source-map',
     entry: path.resolve(__dirname, 'index.jsx'),
     output: {
         path: path.join(__dirname, '../docs'),
         filename: 'bundle.js?[hash]'
     },
     module: {
-        preLoaders: [
+        rules: [
             // http://survivejs.com/webpack_react/linting_in_webpack/
             {
                 test: /\.jsx?$/,
-                loaders: ['eslint'],
+                loader: 'eslint-loader',
+                enforce: 'pre',
                 exclude: /node_modules/
             },
             {
                 test: /\.styl$/,
-                loader: 'stylint'
-            }
-        ],
-        loaders: [
-            {
-                test: /\.json$/,
-                loader: 'json'
+                loader: 'stylint-loader',
+                enforce: 'pre'
             },
             {
                 test: /\.jsx?$/,
-                loader: 'babel',
+                loader: 'babel-loader',
                 exclude: /(node_modules|bower_components)/
             },
             {
                 test: /\.styl$/,
-                loaders: [
-                    'style',
-                    'css?-autoprefixer&camelCase&modules&importLoaders=1&localIdentName=[hash:base64:5]',
-                    'stylus'
+                use: [
+                    'style-loader',
+                    'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]',
+                    'stylus-loader'
                 ]
             },
             {
                 test: /\.css$/,
-                loader: 'style!css?-autoprefixer'
+                loader: 'style-loader!css-loader'
             },
             {
                 test: /\.(png|jpg)$/,
-                loader: 'url',
-                query: {
+                loader: 'url-loader',
+                options: {
                     limit: 8192
                 }
+            },
+            {
+                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    mimetype: 'application/font-woff'
+                }
+            },
+            {
+                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                loader: 'file-loader'
             }
         ]
     },
-    stylus: {
-        // nib - CSS3 extensions for Stylus
-        use: [nib()],
-        // no need to have a '@import "nib"' in the stylesheet
-        import: ['~nib/lib/nib/index.styl']
-    },
     plugins: [
+        new webpack.LoaderOptionsPlugin({
+            debug: true,
+        }),
+        new webpack.NamedModulesPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new stylusLoader.OptionsPlugin({
+            default: {
+                // nib - CSS3 extensions for Stylus
+                use: [nib()],
+                // no need to have a '@import "nib"' in the stylesheet
+                import: ['~nib/lib/nib/index.styl']
+            }
+        }),
         new HtmlWebpackPlugin({
             filename: '../docs/index.html',
             template: 'index.html'
         })
     ],
     resolve: {
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.json', '.jsx']
     },
     // https://webpack.github.io/docs/webpack-dev-server.html#additional-configuration-options
     devServer: {
         noInfo: false,
-        quite: false,
         lazy: false,
         // https://webpack.github.io/docs/node.js-api.html#compiler
         watchOptions: {
-            poll: true // use polling instead of native watchers
+            poll: true, // use polling instead of native watchers
+            ignored: /node_modules/
         }
     }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-breadcrumbs",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Trend Micro Components: React Breadcrumbs",
   "main": "lib/index.js",
   "files": [
@@ -52,39 +52,42 @@
     "react-addons-shallow-compare": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
-    "@trendmicro/react-anchor": "~0.5.1",
-    "babel-cli": "~6.18.0",
-    "babel-core": "~6.18.2",
+    "@trendmicro/react-anchor": "~0.5.2",
+    "@trendmicro/react-buttons": "~1.0.0",
+    "babel-cli": "~6.23.0",
+    "babel-core": "~6.23.1",
     "babel-eslint": "~7.1.1",
-    "babel-loader": "~6.2.9",
+    "babel-loader": "~6.3.2",
     "babel-plugin-transform-decorators-legacy": "~1.3.4",
-    "babel-preset-es2015": "~6.18.0",
-    "babel-preset-react": "~6.16.0",
-    "babel-preset-stage-0": "~6.16.0",
-    "clean-css": "~3.4.21",
-    "coveralls": "~2.11.15",
-    "css-loader": "~0.26.1",
-    "eslint": "~3.11.1",
-    "eslint-config-trendmicro": "~0.5.0",
-    "eslint-loader": "~1.6.1",
+    "babel-preset-es2015": "~6.22.0",
+    "babel-preset-react": "~6.23.0",
+    "babel-preset-stage-0": "~6.22.0",
+    "clean-css": "~4.0.8",
+    "clean-css-cli": "~4.0.8",
+    "coveralls": "~2.11.16",
+    "css-loader": "~0.26.2",
+    "eslint": "~3.16.1",
+    "eslint-config-trendmicro": "~0.5.1",
+    "eslint-loader": "~1.6.3",
     "eslint-plugin-import": "~2.2.0",
     "eslint-plugin-jsx-a11y": "~2.2.3",
-    "eslint-plugin-react": "~6.8.0",
-    "extract-text-webpack-plugin": "~1.0.1",
-    "file-loader": "~0.9.0",
-    "html-webpack-plugin": "~2.24.1",
+    "eslint-plugin-react": "~6.10.0",
+    "extract-text-webpack-plugin": "~2.0.0",
+    "file-loader": "~0.10.1",
+    "find-imports": "~0.5.1",
+    "html-webpack-plugin": "~2.28.0",
     "http-server": "~0.9.0",
-    "json-loader": "~0.5.4",
     "nib": "~1.1.2",
     "react": "^0.14.0 || ^15.0.0",
     "react-dom": "^0.14.0 || ^15.0.0",
-    "style-loader": "~0.13.1",
-    "stylint": "~1.5.7",
+    "style-loader": "~0.13.2",
+    "stylint": "~1.5.9",
     "stylint-loader": "~1.0.0",
-    "stylus-loader": "~2.4.0",
-    "tap": "~8.0.1",
-    "url-loader": "~0.5.7",
-    "webpack": "~1.14.0",
-    "webpack-dev-server": "~1.16.2"
+    "stylus-loader": "~2.5.0",
+    "tap": "~10.3.0",
+    "trendmicro-ui": "~0.3.0",
+    "url-loader": "~0.5.8",
+    "webpack": "~2.2.1",
+    "webpack-dev-server": "~2.4.1"
   }
 }

webpack.config.js

@@ -2,6 +2,8 @@ var pkg = require('./package.json');
 var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var findImports = require('find-imports');
+var stylusLoader = require('stylus-loader');
 var nib = require('nib');
 var publicname = pkg.name.replace(/^@\w+\//, ''); // Strip out "@trendmicro/" from package name
 var banner = [
@@ -21,62 +23,61 @@ module.exports = {
         libraryTarget: 'commonjs2'
     },
     externals: []
+        .concat(findImports(['src/**/*.{js,jsx}'], { flatten: true }))
         .concat(Object.keys(pkg.peerDependencies))
         .concat(Object.keys(pkg.dependencies)),
     module: {
-        preLoaders: [
+        rules: [
             // http://survivejs.com/webpack_react/linting_in_webpack/
             {
                 test: /\.jsx?$/,
-                loaders: ['eslint'],
+                loader: 'eslint-loader',
+                enforce: 'pre',
                 exclude: /node_modules/
             },
             {
                 test: /\.styl$/,
-                loader: 'stylint'
-            }
-        ],
-        loaders: [
-            {
-                test: /\.json$/,
-                loader: 'json'
+                loader: 'stylint-loader',
+                enforce: 'pre'
             },
             {
                 test: /\.jsx?$/,
-                loader: 'babel',
+                loader: 'babel-loader',
                 exclude: /(node_modules|bower_components)/
             },
             {
                 test: /\.styl$/,
-                loader: ExtractTextPlugin.extract(
-                    'style',
-                    'css?-autoprefixer&camelCase&modules&importLoaders=1&localIdentName=' + localClassPrefix + '---[local]---[hash:base64:5]!stylus'
-                )
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?camelCase&modules&importLoaders=1&localIdentName=' + localClassPrefix + '---[local]---[hash:base64:5]!stylus-loader'
+                })
             },
             {
                 test: /\.css$/,
-                loader: 'style!css?-autoprefixer'
-            },
-            {
-                test: /\.(png|jpg)$/,
-                loader: 'url',
-                query: {
-                    limit: 8192
-                }
+                loader: 'style-loader!css-loader'
             }
         ]
     },
-    stylus: {
-        // nib - CSS3 extensions for Stylus
-        use: [nib()],
-        // no need to have a '@import "nib"' in the stylesheet
-        import: ['~nib/lib/nib/index.styl']
-    },
     plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                // This has effect on the react lib size
+                NODE_ENV: JSON.stringify('production')
+            }
+        }),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new stylusLoader.OptionsPlugin({
+            default: {
+                // nib - CSS3 extensions for Stylus
+                use: [nib()],
+                // no need to have a '@import "nib"' in the stylesheet
+                import: ['~nib/lib/nib/index.styl']
+            }
+        }),
         new ExtractTextPlugin('../dist/' + publicname + '.css'),
         new webpack.BannerPlugin(banner)
     ],
     resolve: {
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.json', '.jsx']
     }
 };