From 97849c550fe852f4e903437268ed71048aa60972 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Fri, 24 Mar 2017 11:36:24 +0200 Subject: [PATCH] chore(package): update to webpack 2 --- config.js | 77 +++++++++---------- .../ComponentDoc/ComponentExample.js | 2 +- docs/app/index.js | 2 +- package.json | 6 +- webpack.config.js | 70 ++++++++--------- webpack.dll.js | 24 ++---- webpack.umd.config.js | 13 ++-- 7 files changed, 87 insertions(+), 107 deletions(-) diff --git a/config.js b/config.js index f5b81ddd85..d28ee925b1 100644 --- 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 index ecb51a2103..bed5dbd145 100644 --- 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 index 11364ca297..9ff7e1e41f 100644 --- 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 index ed2d0fba79..3d9165fb91 100644 --- 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 index 9ec7cf2681..c0141eb316 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,9 +1,9 @@ -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 @@ -11,13 +11,16 @@ 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: {}, } // ------------------------------------ @@ -25,7 +28,6 @@ const webpackConfig = { // ------------------------------------ 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,21 +74,21 @@ 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, }, }), ] @@ -94,12 +96,13 @@ webpackConfig.plugins = [ 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 index 9af1cfa244..2c1a62683c 100644 --- 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 diff --git a/webpack.umd.config.js b/webpack.umd.config.js index bff52695b0..412f3892e9 100644 --- a/webpack.umd.config.js +++ b/webpack.umd.config.js @@ -1,5 +1,6 @@ -const config = require('./config') const webpack = require('webpack') + +const config = require('./config') const webpackConfig = require('./webpack.config') const pkg = require('./package.json') @@ -11,6 +12,10 @@ const webpackUMDConfig = { entry: { [pkg.name]: paths.src('umd.js'), }, + externals: { + react: 'React', + 'react-dom': 'ReactDOM', + }, output: { filename: '[name].min.js', libraryTarget: 'umd', @@ -19,13 +24,7 @@ const webpackUMDConfig = { publicPath: '/', pathinfo: true, }, - externals: { - react: 'React', - 'react-dom': 'ReactDOM', - }, plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { unused: true,