diff --git a/.gitignore b/.gitignore index 1c3d37f..7e4b1ee 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ node_modules *.log buildClient buildServer -.vscode \ No newline at end of file +.vscode +.DS_Store \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0df4678..f7e42b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1556,12 +1556,12 @@ } }, "babel-plugin-universal-import": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/babel-plugin-universal-import/-/babel-plugin-universal-import-1.5.3.tgz", - "integrity": "sha512-jRlF9oLVvp9qGp2Lunw1ZeYUvNvEefIqtdoAE/A5ts+hG4w73AxA/Riok4lwwcoNq26R8Xlk8BXaV38TRkpRXQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-universal-import/-/babel-plugin-universal-import-3.0.0.tgz", + "integrity": "sha512-FT/f2FnIhlYDRb8wJ8ETT3XDaruTC1vO/8LrhIq+5dKaVe9b/aYzPg15XdYm8K7/V2KYetPKGP9qzed3qZdrQQ==", "dev": true, "requires": { - "@babel/helper-module-imports": "^7.0.0-beta.32" + "@babel/helper-module-imports": "^7.0.0-beta.49" } }, "babel-polyfill": { @@ -11877,7 +11877,8 @@ "webpack-flush-chunks": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/webpack-flush-chunks/-/webpack-flush-chunks-2.0.0.tgz", - "integrity": "sha512-qqO9Tw1STyW3ao2tW1vKST6T1V29OZF4PHlycs1SeTqnBFlnUacGbJ0WHBE/N3L6dusPYF8aeUFjq/ln6n/ZFA==" + "integrity": "sha512-qqO9Tw1STyW3ao2tW1vKST6T1V29OZF4PHlycs1SeTqnBFlnUacGbJ0WHBE/N3L6dusPYF8aeUFjq/ln6n/ZFA==", + "dev": true }, "webpack-hot-middleware": { "version": "2.22.2", diff --git a/package.json b/package.json index 8ab0c0e..b115f25 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "babel-core": "^6.24.0", "babel-eslint": "^8.0.1", "babel-loader": "^7.1.2", - "babel-plugin-universal-import": "^1.2.6", + "babel-plugin-universal-import": "^3.0.0", "babel-preset-es2015": "^6.24.0", "babel-preset-react": "^6.23.0", "babel-preset-stage-2": "^6.22.0", diff --git a/server/index.js b/server/index.js index ac54281..5bc2efd 100644 --- a/server/index.js +++ b/server/index.js @@ -2,17 +2,12 @@ require('colors') const express = require('express') const webpack = require('webpack') const noFavicon = require('express-no-favicons') -const webpackDevMiddleware = require('webpack-dev-middleware') -const webpackHotMiddleware = require('webpack-hot-middleware') -const webpackHotServerMiddleware = require('webpack-hot-server-middleware') -const clientConfig = require('../webpack/client.dev') -const serverConfig = require('../webpack/server.dev') const clientConfigProd = require('../webpack/client.prod') const serverConfigProd = require('../webpack/server.prod') -const publicPath = clientConfig.output.publicPath -const outputPath = clientConfig.output.path -const DEV = process.env.NODE_ENV === 'development' +const { publicPath } = clientConfigProd.output +const outputPath = clientConfigProd.output.path + const app = express() app.use(noFavicon()) @@ -25,25 +20,12 @@ const done = () => console.log('BUILD COMPLETE -- Listening @ http://localhost:3000'.magenta) }) -if (DEV) { - const compiler = webpack([clientConfig, serverConfig]) - const clientCompiler = compiler.compilers[0] - const options = { publicPath, stats: { colors: true } } - - app.use(webpackDevMiddleware(compiler, options)) - app.use(webpackHotMiddleware(clientCompiler)) - app.use(webpackHotServerMiddleware(compiler)) +webpack([clientConfigProd, serverConfigProd]).run((err, stats) => { + const clientStats = stats.toJson().children[0] + const serverRender = require('../buildServer/main.js').default - compiler.plugin('done', done) -} -else { - webpack([clientConfigProd, serverConfigProd]).run((err, stats) => { - const clientStats = stats.toJson().children[0] - const serverRender = require('../buildServer/main.js').default + app.use(publicPath, express.static(outputPath)) + app.use(serverRender({ clientStats })) - app.use(publicPath, express.static(outputPath)) - app.use(serverRender({ clientStats })) - - done() - }) -} + done() +}) diff --git a/webpack/client.dev.js b/webpack/client.dev.js deleted file mode 100644 index fec56ba..0000000 --- a/webpack/client.dev.js +++ /dev/null @@ -1,65 +0,0 @@ -const path = require('path') -const webpack = require('webpack') -const WriteFilePlugin = require('write-file-webpack-plugin') // here so you can see what chunks are built -const ExtractCssChunks = require('extract-css-chunks-webpack-plugin') - -module.exports = { - name: 'client', - target: 'web', - // devtool: 'source-map', - devtool: 'eval', - entry: [ - 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=false&noInfo=false', - 'react-hot-loader/patch', - path.resolve(__dirname, '../src/index.js') - ], - output: { - filename: '[name].js', - chunkFilename: '[name].js', - path: path.resolve(__dirname, '../buildClient'), - publicPath: '/static/' - }, - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: 'babel-loader' - }, - { - test: /\.styl$/, - use: [ - ExtractCssChunks.loader, - { - loader: 'css-loader', - options: { - modules: true, - localIdentName: '[name]__[local]--[hash:base64:5]' - } - }, - { - loader: 'stylus-loader' - } - ] - } - ] - }, - resolve: { - extensions: ['.js', '.css', '.styl'] - }, - plugins: [ - new WriteFilePlugin(), - new ExtractCssChunks(), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify('development') - } - }) - ], - - optimization: { - runtimeChunk: { - name: 'bootstrap' - } - } -} diff --git a/webpack/client.prod.js b/webpack/client.prod.js index a8ae21c..1b9dd22 100644 --- a/webpack/client.prod.js +++ b/webpack/client.prod.js @@ -8,8 +8,8 @@ module.exports = { devtool: 'source-map', entry: [path.resolve(__dirname, '../src/index.js')], output: { - filename: '[name].[chunkhash].js', - chunkFilename: '[name].[chunkhash].js', + filename: '[name].js', + chunkFilename: '[name].js', path: path.resolve(__dirname, '../buildClient'), publicPath: '/static/' }, diff --git a/webpack/server.dev.js b/webpack/server.dev.js deleted file mode 100644 index b39bb73..0000000 --- a/webpack/server.dev.js +++ /dev/null @@ -1,78 +0,0 @@ -const fs = require('fs') -const path = require('path') -const webpack = require('webpack') -const WriteFilePlugin = require('write-file-webpack-plugin') - -const res = p => path.resolve(__dirname, p) - -const nodeModules = res('../node_modules') -const entry = res('../server/render.js') -const output = res('../buildServer') - -// if you're specifying externals to leave unbundled, you need to tell Webpack -// to still bundle `react-universal-component`, `webpack-flush-chunks` and -// `require-universal-module` so that they know they are running -// within Webpack and can properly make connections to client modules: -const externals = fs - .readdirSync(nodeModules) - .filter(x => !/\.bin|react-universal-component|webpack-flush-chunks/.test(x)) - .reduce((externals, mod) => { - externals[mod] = `commonjs ${mod}` - return externals - }, {}) - -externals['react-dom/server'] = 'commonjs react-dom/server' - -module.exports = { - name: 'server', - target: 'node', - // devtool: 'source-map', - devtool: 'eval', - entry: [entry], - externals, - output: { - path: output, - filename: 'main.js', - libraryTarget: 'commonjs2' - }, - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: 'babel-loader' - }, - { - test: /\.styl$/, - exclude: /node_modules/, - use: [ - { - loader: 'css-loader/locals', - options: { - modules: true, - localIdentName: '[name]__[local]--[hash:base64:5]' - } - }, - { - loader: 'stylus-loader' - } - ] - } - ] - }, - resolve: { - extensions: ['.js', '.css', '.styl'] - }, - plugins: [ - new WriteFilePlugin(), - new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 1 - }), - - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify('development') - } - }) - ] -}