diff --git a/config/webpack/webpack.config.base.js b/config/webpack/webpack.config.base.js index 4d9bc2d..9e0db5e 100644 --- a/config/webpack/webpack.config.base.js +++ b/config/webpack/webpack.config.base.js @@ -3,47 +3,59 @@ const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPl const packages = require('../../package.json'); module.exports = { - target: 'web', - entry: { - webapp: [ - Path.resolve(__dirname, '../../src/ts/@overflow/webapp/index.tsx') - ], - vendor: Object.keys(packages.dependencies) - }, - - output: { - path: Path.resolve(__dirname, '../../dist'), - filename: '[name].js', - publicPath: '/' - }, - - devtool: '', - - resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'], - plugins: [ - new TsConfigPathsPlugin({ - tsconfig: "tsconfig.json", - compiler: "typescript" - }) - ] - }, - - module: { - rules: [ - { - test: /\.tsx?$/, - enforce: 'pre', - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ], - loader: 'tslint-loader', - } - ] - }, - plugins: [ + target: 'web', + entry: { + webapp: [ + Path.resolve(__dirname, '../../src/ts/@overflow/webapp/index.tsx') ], - node: { - fs: 'empty' - } + vendor: Object.keys(packages.dependencies) + }, + + output: { + path: Path.resolve(__dirname, '../../dist'), + filename: '[name].js', + publicPath: '/' + }, + + devtool: '', + + resolve: { + extensions: ['.ts', '.tsx', '.js', '.json'], + // Fix webpack's default behavior to not load packages with jsnext:main module + // https://github.com/Microsoft/TypeScript/issues/11677 + mainFields: ['browser', 'main'], + plugins: [ + new TsConfigPathsPlugin({ + tsconfig: "tsconfig.json", + compiler: "typescript" + }) + ] + }, + + module: { + loaders: [ + { + enforce: 'pre', + test: /\.tsx?$/, + exclude: [ + Path.resolve(__dirname, '../../node_modules/') + ], + use: [ + { + loader: 'tslint-loader' + } + ], + } + ] + }, + + plugins: [ + ], + + node: { + // workaround for webpack-dev-server issue + // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179 + fs: 'empty', + net: 'empty' + } }; diff --git a/config/webpack/webpack.config.dev.js b/config/webpack/webpack.config.dev.js index 2a76140..302b9e5 100644 --- a/config/webpack/webpack.config.dev.js +++ b/config/webpack/webpack.config.dev.js @@ -6,96 +6,104 @@ const WebpackDashboardPlugin = require('webpack-dashboard/plugin'); const configBase = require('./webpack.config.base.js'); module.exports = WebpackMerge(configBase, { - entry: { - webapp: [ - 'react-hot-loader/patch' - ] - }, + // entry: { + // webapp: [ + // 'react-hot-loader/patch' + // ] + // }, - devtool: 'inline-source-map', - - devServer: { - hot: true, - inline: true, - historyApiFallback: true, - publicPath: '/', // match the output `publicPath` - contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path - host: '127.0.0.1', - port: 9091, - stats: { - colors: true - }, - watchOptions: { - ignored: /node_modules/, - }, + devtool: 'inline-source-map', + + devServer: { + hot: true, + inline: true, + historyApiFallback: true, + publicPath: '/', // match the output `publicPath` + contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path + host: '127.0.0.1', + port: 9091, + stats: { + colors: true }, + watchOptions: { + ignored: /node_modules/, + }, + }, - module: { - rules: [ - { - enforce: 'pre', - test: /\.js$/, - loader: 'source-map-loader', - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ] - }, - { - enforce: 'pre', - test: /\.tsx?$/, - use: "source-map-loader", - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ] - }, - // { - // test: /\.tsx?$/, - // loaders: [ - // 'awesome-typescript-loader' - // ], - // exclude: [ - // Path.resolve(__dirname, '../../node_modules/') - // ], - // include: [ - // Path.resolve(__dirname, '../../src/') - // ] - // }, - { - test: /\.tsx?$/, - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ], - include: [ - Path.resolve(__dirname, '../../src/') - ], - use: [ - { - loader: 'react-hot-loader/webpack' - }, - { - loader: 'awesome-typescript-loader', - options: { - transpileOnly: true, - useTranspileModule: false, - sourceMap: true, - }, - }, - ], - }, + module: { + loaders: [ + // source-map + { + enforce: 'pre', + test: /\.js$/, + use: [ + { + loader: 'source-map-loader' + } + ], + exclude: [ + Path.resolve(__dirname, '../../node_modules/') ] - }, - plugins: [ - new WebpackDashboardPlugin(), - new Webpack.HotModuleReplacementPlugin(), - new Webpack.NamedModulesPlugin(), - new Webpack.NoEmitOnErrorsPlugin(), - new HtmlWebpackPlugin({ - template: Path.resolve(__dirname, '../../public/index.html') - }), - new Webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: Infinity, - filename: 'vendor.js' - }), - ] + }, + { + enforce: 'pre', + test: /\.tsx$/, + use: [ + { + loader: 'source-map-loader' + } + ], + exclude: [ + Path.resolve(__dirname, '../../node_modules/') + ] + }, + // .ts, .tsx + { + test: /\.tsx?$/, + exclude: [ + Path.resolve(__dirname, '../../node_modules/') + ], + include: [ + Path.resolve(__dirname, '../../src/') + ], + use: [ + { + loader: 'react-hot-loader/webpack' + }, + { + loader: 'awesome-typescript-loader', + options: { + transpileOnly: true, + useTranspileModule: false, + sourceMap: true, + }, + }, + ] + }, + + // static assets + { test: /\.html$/, use: 'html-loader' }, + { test: /\.png$/, use: 'url-loader?limit=10000' }, + { test: /\.jpg$/, use: 'file-loader' }, + ], + }, + + plugins: [ + new WebpackDashboardPlugin(), + new Webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('development') + }), + new Webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: Infinity, + filename: 'vendor.js' + }), + new Webpack.optimize.AggressiveMergingPlugin(), + new Webpack.HotModuleReplacementPlugin(), + new Webpack.NamedModulesPlugin(), + new Webpack.NoEmitOnErrorsPlugin(), + new HtmlWebpackPlugin({ + template: Path.resolve(__dirname, '../../public/index.html') + }), + ] }); diff --git a/config/webpack/webpack.config.prod.js b/config/webpack/webpack.config.prod.js index 66fd666..853f0c0 100644 --- a/config/webpack/webpack.config.prod.js +++ b/config/webpack/webpack.config.prod.js @@ -5,67 +5,77 @@ const configBase = require('./webpack.config.base.js'); module.exports = WebpackMerge(configBase, { - devtool: 'source-map', - - module: { - rules: [ - { - enforce: 'pre', - test: /\.js$/, - loader: 'source-map-loader', - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ] - }, - { - test: /\.tsx?$/, - loader: 'awesome-typescript-loader', - exclude: [ - Path.resolve(__dirname, '../../node_modules/') - ] - }, + devtool: 'source-map', + + module: { + loaders: [ + // .ts, .tsx + { + test: /\.tsx?$/, + exclude: [ + Path.resolve(__dirname, '../../node_modules/') + ], + include: [ + Path.resolve(__dirname, '../../src/') + ], + use: [ + { + loader: 'awesome-typescript-loader?module=es6' + }, ] - }, - plugins: [ - new Webpack.DefinePlugin({ - 'process.env': { - 'NODE_ENV': JSON.stringify('production') - }, - 'DEBUG': false, - '__DEVTOOLS__': false - }), - // Plugings for optimizing size and performance. - // Here you have all the available by now: - // Webpack 1. https://github.com/webpack/webpack/blob/v1.13.3/lib/optimize - // Webpack 2. https://github.com/webpack/webpack/tree/master/lib/optimize - new Webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false, - screw_ie8: true, - conditionals: true, - unused: true, - comparisons: true, - sequences: true, - dead_code: true, - evaluate: true, - if_return: true, - join_vars: true, - drop_console: true, - drop_debugger: true, - global_defs: { - __REACT_HOT_LOADER__: undefined // eslint-disable-line no-undefined - } - }, - minimize: true, - debug: false, - sourceMap: true, - output: { - comments: false - }, - - }), - // Included by default in webpack 2 - // new webpack.optimize.OccurrenceOrderPlugin(), - new Webpack.optimize.AggressiveMergingPlugin() - ] + }, + + // static assets + { test: /\.html$/, use: 'html-loader' }, + { test: /\.png$/, use: 'url-loader?limit=10000' }, + { test: /\.jpg$/, use: 'file-loader' }, + ], + }, + plugins: [ + new Webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': JSON.stringify('production') + }, + 'DEBUG': false, + '__DEVTOOLS__': false + }), + new Webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: Infinity, + filename: 'vendor.js' + }), + // Plugings for optimizing size and performance. + // Here you have all the available by now: + // Webpack 1. https://github.com/webpack/webpack/blob/v1.13.3/lib/optimize + // Webpack 2. https://github.com/webpack/webpack/tree/master/lib/optimize + new Webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false, + screw_ie8: true, + conditionals: true, + unused: true, + comparisons: true, + sequences: true, + dead_code: true, + evaluate: true, + if_return: true, + join_vars: true, + drop_console: true, + drop_debugger: true, + global_defs: { + __REACT_HOT_LOADER__: undefined // eslint-disable-line no-undefined + } + }, + minimize: true, + debug: false, + sourceMap: true, + output: { + comments: false + }, + + }), + // Included by default in webpack 2 + // new webpack.optimize.OccurrenceOrderPlugin(), + new Webpack.optimize.AggressiveMergingPlugin() + ] }); diff --git a/package.json b/package.json index e477efc..12184b8 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.6", "greenkeeper-postpublish": "^1.3.0", + "html-loader": "^0.5.1", "html-webpack-plugin": "^2.30.1", "image-webpack-loader": "^3.4.2", "jest": "^21.2.1", diff --git a/src/ts/@overflow/webapp/index.tsx b/src/ts/@overflow/webapp/index.tsx index 5ed98e1..d3cb3c7 100644 --- a/src/ts/@overflow/webapp/index.tsx +++ b/src/ts/@overflow/webapp/index.tsx @@ -100,6 +100,16 @@ class WebAppApplication { private renderApp(): void { WebAppApplication.isProduction ? this.renderProduction() : this.rederDevelopment(); + // ReactDOM.render( + // + // + // + // + // + // , + // this.container, + // ); + } private renderProduction(): void { ReactDOM.render( @@ -114,8 +124,8 @@ class WebAppApplication { private rederDevelopment(): void { if (module.hot) { - module.hot.accept('./pages/webapp', () => { - const NextApp = require('./pages/webapp').default; + module.hot.accept('./pages/webapp', async () => { + const NextApp = (await import('./pages/webapp')).default; ReactDOM.render( diff --git a/src/ts/@overflow/webapp/pages/webapp.tsx b/src/ts/@overflow/webapp/pages/webapp.tsx index b43b9bc..78d2fbf 100644 --- a/src/ts/@overflow/webapp/pages/webapp.tsx +++ b/src/ts/@overflow/webapp/pages/webapp.tsx @@ -14,7 +14,7 @@ class WebApp extends React.Component { public render(): JSX.Element { return ( - Hello... + Hello. ); } }