From 7482eeac0ef1acddbbc4d9147019012ed133bd26 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 21 Jul 2016 05:26:04 +0100 Subject: [PATCH] Fix local development paths Local npm start and npm run build got broken by #33 --- config/webpack.config.dev.js | 25 +++++++++++++++++-------- config/webpack.config.prod.js | 25 +++++++++++++++++-------- package.json | 2 +- scripts/start.js | 2 ++ 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index e0e472c3b2b..74a6c9a0b10 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -12,20 +12,29 @@ var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +// TODO: hide this behind a flag and eliminate dead code on eject. +// This shouldn't be exposed to the user. var isInNodeModules = 'node_modules' === path.basename(path.resolve(path.join(__dirname, '..', '..'))); -var relative = isInNodeModules ? '../../..' : '..'; +var relativePath = isInNodeModules ? '../../..' : '..'; +if (process.argv[2] === '--debug-template') { + relativePath = '../template'; +} +var srcPath = path.resolve(__dirname, relativePath, 'src'); +var nodeModulesPath = path.join(__dirname, '..', 'node_modules'); +var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html'); +var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build'); module.exports = { devtool: 'eval', entry: [ require.resolve('webpack-dev-server/client') + '?http://localhost:3000', require.resolve('webpack/hot/dev-server'), - './src/index' + path.join(srcPath, 'index') ], output: { // Next line is not used in dev but WebpackDevServer crashes without it: - path: path.join(__dirname, relative, 'build'), + path: buildPath, pathinfo: true, filename: 'bundle.js', publicPath: '/' @@ -34,7 +43,7 @@ module.exports = { extensions: ['', '.js'], }, resolveLoader: { - root: path.join(__dirname, '..', 'node_modules'), + root: nodeModulesPath, moduleTemplates: ['*-loader'] }, module: { @@ -42,19 +51,19 @@ module.exports = { { test: /\.js$/, loader: 'eslint', - include: path.resolve(__dirname, relative, 'src'), + include: srcPath, } ], loaders: [ { test: /\.js$/, - include: path.resolve(__dirname, relative, 'src'), + include: srcPath, loader: 'babel', query: require('./babel.dev') }, { test: /\.css$/, - include: path.resolve(__dirname, relative, 'src'), + include: srcPath, loader: 'style!css!postcss' }, { @@ -81,7 +90,7 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ inject: true, - template: path.resolve(__dirname, relative, 'index.html'), + template: indexHtmlPath, }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }), // Note: only CSS is currently hot reloaded diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 2fb922608ea..5f792f3b88b 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -13,16 +13,25 @@ var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); +// TODO: hide this behind a flag and eliminate dead code on eject. +// This shouldn't be exposed to the user. var isInNodeModules = 'node_modules' === path.basename(path.resolve(path.join(__dirname, '..', '..'))); -var relative = isInNodeModules ? '../../..' : '..'; +var relativePath = isInNodeModules ? '../../..' : '..'; +if (process.argv[2] === '--debug-template') { + relativePath = '../template'; +} +var srcPath = path.resolve(__dirname, relativePath, 'src'); +var nodeModulesPath = path.join(__dirname, '..', 'node_modules'); +var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html'); +var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build'); module.exports = { bail: true, devtool: 'source-map', - entry: './src/index', + entry: path.join(srcPath, 'index'), output: { - path: path.resolve(__dirname, relative, 'build'), + path: buildPath, filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].chunk.js', // TODO: this wouldn't work for e.g. GH Pages. @@ -33,7 +42,7 @@ module.exports = { extensions: ['', '.js'], }, resolveLoader: { - root: path.join(__dirname, '..', 'node_modules'), + root: nodeModulesPath, moduleTemplates: ['*-loader'] }, module: { @@ -41,19 +50,19 @@ module.exports = { { test: /\.js$/, loader: 'eslint', - include: path.resolve(__dirname, relative, 'src') + include: srcPath } ], loaders: [ { test: /\.js$/, - include: path.resolve(__dirname, relative, 'src'), + include: srcPath, loader: 'babel', query: require('./babel.prod') }, { test: /\.css$/, - include: path.resolve(__dirname, relative, 'src'), + include: srcPath, loader: ExtractTextPlugin.extract('style', 'css!postcss') }, { @@ -82,7 +91,7 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ inject: true, - template: path.resolve(__dirname, relative, 'index.html'), + template: indexHtmlPath, minify: { removeComments: true, collapseWhitespace: true, diff --git a/package.json b/package.json index a93f86df385..a09a6986beb 100644 --- a/package.json +++ b/package.json @@ -91,4 +91,4 @@ "webpack", "webpack-dev-server" ] -} \ No newline at end of file +} diff --git a/scripts/start.js b/scripts/start.js index 0edd941caa4..720ab102827 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -16,6 +16,8 @@ var config = require('../config/webpack.config.dev'); var execSync = require('child_process').execSync; var opn = require('opn'); +// TODO: hide this behind a flag and eliminate dead code on eject. +// This shouldn't be exposed to the user. var handleCompile; if (process.argv[2] === '--smoke-test') { handleCompile = function (err, stats) {