chore(package): update to webpack 2

Semantic-Org · Mar 24, 2017 · 97849c5 · 97849c5
1 parent d0a54fb
commit 97849c5
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 107 deletions.
diff --git a/config.js b/config.js
@@ -1,8 +1,9 @@
 const path = require('path')
-const yargs = require('yargs')
-
-const { argv } = yargs
+const { argv } = require('yargs')
 
+// ------------------------------------
+// Environment vars
+// ------------------------------------
 const env = process.env.NODE_ENV || 'development'
 const __DEV__ = env === 'development'
 const __STAGING__ = env === 'staging'
@@ -18,12 +19,10 @@ let config = {
   path_base: __dirname,
   dir_src: 'src',
   dir_dist: 'dist',
-  dir_docs_root: 'docs',
-  dir_docs_src: 'docs/app',
+  dir_dll: 'dll',
   dir_docs_dist: 'docs/build',
+  dir_docs_src: 'docs/app',
   dir_umd_dist: 'dist/umd',
-  dir_server: 'server',
-  dir_test: 'test',
 }
 
 // ------------------------------------
@@ -35,10 +34,10 @@ const paths = {
   base,
   src: base.bind(null, config.dir_src),
   dist: base.bind(null, config.dir_dist),
-  test: base.bind(null, config.dir_test),
+  dll: base.bind(null, config.dir_dll),
   docsDist: base.bind(null, config.dir_docs_dist),
-  umdDist: base.bind(null, config.dir_umd_dist),
   docsSrc: base.bind(null, config.dir_docs_src),
+  umdDist: base.bind(null, config.dir_umd_dist),
 }
 
 config = Object.assign({}, config, {
@@ -53,30 +52,27 @@ config = Object.assign({}, config, {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: __DEV__ && 'cheap-source-map'
-  || __TEST__ && 'cheap-source-map'
-  || __STAGING__ && 'source-map',
+  compiler_devtool: (__DEV__ || __TEST__) && 'cheap-source-map' || __STAGING__ && 'source-map',
+  compiler_globals: {
+    process: {
+      env: {
+        NODE_ENV: JSON.stringify(env),
+      },
+    },
+    __DEV__,
+    __DEBUG__: !!argv.debug,
+    __STAGING__,
+    __PATH_SEP__: JSON.stringify(path.sep),
+    __TEST__,
+    __PROD__,
+  },
   compiler_hash_type: __PROD__ ? 'chunkhash' : 'hash',
   compiler_inline_manifest: false,
   compiler_fail_on_warning: __TEST__ || __PROD__,
   compiler_lint: argv.lint !== false,
-  compiler_quiet: false,
   compiler_output_path: paths.base(config.dir_docs_dist),
   compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : '/',
-  compiler_vendor: [
-    'babel-standalone',
-    'brace',
-    'brace/ext/language_tools',
-    'brace/mode/jsx',
-    'brace/mode/html',
-    'brace/theme/tomorrow',
-    'classnames',
-    'copy-to-clipboard',
-    'faker',
-    'react',
-    'react-ace',
-    'react-dom',
-  ],
+  compiler_quiet: false,
   compiler_stats: {
     hash: false,            // the hash of the compilation
     version: false,         // webpack version info
@@ -95,19 +91,20 @@ config = Object.assign({}, config, {
     chunksSort: '',         // (string) sort the chunks by that field
     assetsSort: '',         // (string) sort the assets by that field
   },
-  compiler_globals: {
-    process: {
-      env: {
-        NODE_ENV: JSON.stringify(env),
-      },
-    },
-    __DEV__,
-    __DEBUG__: !!argv.debug,
-    __STAGING__,
-    __PATH_SEP__: JSON.stringify(path.sep),
-    __TEST__,
-    __PROD__,
-  },
+  compiler_vendor: [
+    'babel-standalone',
+    'brace',
+    'brace/ext/language_tools',
+    'brace/mode/jsx',
+    'brace/mode/html',
+    'brace/theme/tomorrow',
+    'classnames',
+    'copy-to-clipboard',
+    'faker',
+    'react',
+    'react-ace',
+    'react-dom',
+  ],
 })
 
 module.exports = config
diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -146,7 +146,7 @@ class ComponentExample extends Component {
   getOriginalSourceCode = () => {
     const { examplePath } = this.props
 
-    if (!this.sourceCode) this.sourceCode = require(`!raw!docs/app/Examples/${examplePath}`)
+    if (!this.sourceCode) this.sourceCode = require(`!raw-loader!../../Examples/${examplePath}`)
 
     return this.sourceCode
   }

diff --git a/docs/app/index.js b/docs/app/index.js
@@ -24,7 +24,7 @@ if (__DEV__) {
       ReactDOM.unmountComponentAtNode(mountNode)
 
       try {
-        render(require('./routes').default)
+        render(import('./routes').default)
         document.scrollingElement.scrollTop = scrollTop
         document.scrollingElement.scrollLeft = scrollLeft
       } catch (e) {

diff --git a/package.json b/package.json
@@ -135,9 +135,9 @@
     "tslint-config-typings": "^0.3.1",
     "typescript": "^2.1.5",
     "watch": "^1.0.1",
-    "webpack": "^1.12.14",
-    "webpack-dev-middleware": "^1.5.1",
-    "webpack-hot-middleware": "^2.15.0",
+    "webpack": "^2.3.1",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.1",
     "yargs": "^7.0.2"
   },
   "peerDependencies": {

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,31 +1,33 @@
-const config = require('./config')
-const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const _ = require('lodash')
+const webpack = require('webpack')
 const { argv } = require('yargs')
 
+const config = require('./config')
 const { paths } = config
 const { __DEV__, __TEST__ } = config.compiler_globals
 
 const webpackConfig = {
   name: 'client',
   target: 'web',
   devtool: config.compiler_devtool,
+  module: {},
   resolve: {
-    root: paths.base(),
+    modules: [
+      paths.base(),
+      'node_modules',
+    ],
     alias: {
       'semantic-ui-react': paths.src('index.js'),
     },
   },
-  module: {},
 }
 
 // ------------------------------------
 // Entry Points
 // ------------------------------------
 
 const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
-
 const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map({
   path: webpackHotPath,   // The path which the middleware is serving the event stream on
   timeout: 2000,          // The time to wait after a disconnection before attempting to reconnect
@@ -57,8 +59,8 @@ webpackConfig.entry = __DEV__ ? {
 webpackConfig.output = {
   filename: `[name].[${config.compiler_hash_type}].js`,
   path: config.compiler_output_path,
-  publicPath: config.compiler_public_path,
   pathinfo: true,
+  publicPath: config.compiler_public_path,
 }
 
 // ------------------------------------
@@ -72,34 +74,35 @@ webpackConfig.plugins = [
   }),
   new HtmlWebpackPlugin({
     template: paths.docsSrc('index.ejs'),
-    hash: false,
     filename: 'index.html',
+    hash: false,
     inject: 'body',
     minify: {
       collapseWhitespace: true,
     },
     versions: {
       babel: require('babel-standalone/package.json').version,
-      sui: require('semantic-ui-css/package.json').version,
-      suir: require('./package.json').version,
       faker: require('faker/package.json').version,
+      jsBeautify: require('js-beautify/package.json').version,
       lodash: require('lodash/package.json').version,
       react: require('react/package.json').version,
       reactDOM: require('react-dom/package.json').version,
-      jsBeautify: require('js-beautify/package.json').version,
+      sui: require('semantic-ui-css/package.json').version,
+      suir: require('./package.json').version,
     },
   }),
 ]
 
 if (__DEV__) {
   webpackConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.NoEmitOnErrorsPlugin()
   )
 } else if (!__TEST__) {
   webpackConfig.plugins.push(
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         unused: true,
@@ -112,9 +115,11 @@ if (__DEV__) {
 
 // Don't split bundles during testing, since we only want import one bundle
 if (!__TEST__) {
-  webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
-    names: ['vendor'],
-  }))
+  webpackConfig.plugins.push(
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor'],
+    })
+  )
 }
 
 // ------------------------------------
@@ -125,29 +130,20 @@ webpackConfig.module.noParse = [
 ]
 
 // ------------------------------------
-// Pre-Loaders
-// ------------------------------------
-webpackConfig.module.preLoaders = []
-
-// ------------------------------------
-// Loaders
+// Rules
 // ------------------------------------
-webpackConfig.module.loaders = [{
+webpackConfig.module.rules = [{
   //
   // Babel
   //
   test: /\.js$/,
   exclude: /node_modules/,
-  loader: 'babel',
-  query: {
-    cacheDirectory: true,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+    },
   },
-}, {
-  //
-  // JSON
-  //
-  test: /\.(json|.*rc)$/,
-  loader: 'json',
 }]
 
 // ----------------------------------------
@@ -157,20 +153,20 @@ webpackConfig.module.loaders = [{
 // Local modules can still be enabled (ie for offline development)
 // in TEST we need local modules because karma uses a different index.html (no CDNs)
 if (__TEST__ || argv.localModules) {
-  webpackConfig.module.loaders = [
-    ...webpackConfig.module.loaders,
+  webpackConfig.module.rules = [
+    ...webpackConfig.module.rules,
     {
       //
       // SASS
       //
       test: /\.s?css$/,
-      loaders: ['style', 'css', 'sass'],
+      use: ['style-loader', 'css-loader', 'sass-loader'],
     }, {
       //
       // Files
       //
       test: /\.(eot|ttf|woff|woff2|svg|png)$/,
-      loader: 'file',
+      loader: 'file-loader',
     },
   ]
 } else {
@@ -188,9 +184,9 @@ if (__TEST__ || argv.localModules) {
 
   // find them on the window
   webpackConfig.externals = Object.assign({}, webpackConfig.externals, {
-    faker: 'faker',
     'anchor-js': 'AnchorJS',
     'babel-standalone': 'Babel',
+    faker: 'faker',
     react: 'React',
     'react-dom': 'ReactDOM',
     'react-dom/server': 'ReactDOMServer',

diff --git a/webpack.dll.js b/webpack.dll.js
@@ -1,9 +1,8 @@
 const webpack = require('webpack')
-
 const config = require('./config')
-const webpackDllConfig = { module: {} }
 
 const { paths } = config
+const webpackDllConfig = { module: {} }
 
 // ------------------------------------
 // Entry Points
@@ -15,11 +14,11 @@ webpackDllConfig.entry = {
 // ------------------------------------
 // Bundle Output
 // ------------------------------------
-webpackDllConfig.output = Object.assign({}, webpackDllConfig.output, {
-  path: 'dll',
+webpackDllConfig.output = {
+  path: paths.dll(),
   filename: `dll.[name].[${config.compiler_hash_type}].js`,
   library: '[name]_[hash]',
-})
+}
 
 // ------------------------------------
 // Plugins
@@ -31,32 +30,21 @@ webpackDllConfig.plugins = [
   }),
 ]
 
-// ------------------------------------
-// Pre-Loaders
-// ------------------------------------
-webpackDllConfig.module.preLoaders = []
-
 // ------------------------------------
 // Loaders
 // ------------------------------------
 webpackDllConfig.module.loaders = [{
-  //
-  // JSON
-  //
-  test: /\.json$/,
-  loader: 'json',
-}, {
   //
   // SASS
   //
   test: /\.s?css$/,
-  loaders: ['style', 'css', 'sass'],
+  use: ['style-loader', 'css-loader', 'sass-loader'],
 }, {
   //
   // Files
   //
   test: /\.(eot|ttf|woff|woff2|svg|png)$/,
-  loader: 'file',
+  loader: 'file-loader',
 }]
 
 module.exports = webpackDllConfig