merge webpack config

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.idea

package.json

@@ -36,7 +36,8 @@
     "uglifyjs-webpack-plugin": "^0.4.6",
     "url-loader": "^0.5.9",
     "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1"
+    "webpack-dev-server": "^2.7.1",
+    "webpack-merge": "^4.1.0"
   },
   "dependencies": {
     "axios": "^0.16.2",

src/redux/actions/userInfo.js

@@ -5,6 +5,6 @@ export const GET_USER_INFO_FAIL = "userInfo/GET_USER_INFO_FAIL";
 export function getUserInfo() {
     return {
         types: [GET_USER_INFO_REQUEST, GET_USER_INFO_SUCCESS, GET_USER_INFO_FAIL],
-        promise: client => client.get(`http://localhost:8080/api/user.json`)
+        promise: client => client.get(`/api/user.json`)
     }
 }

webpack.common.config.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+commonConfig = {
+    entry: {
+        app: [
+            path.join(__dirname, 'src/index.js')
+        ],
+        vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
+    },
+    output: {
+        path: path.join(__dirname, './dist'),
+        filename: '[name].[chunkhash].js',
+        chunkFilename: '[name].[chunkhash].js',
+        publicPath: "/"
+    },
+    module: {
+        rules: [{
+            test: /\.js$/,
+            use: ['babel-loader?cacheDirectory=true'],
+            include: path.join(__dirname, 'src')
+        }, {
+            test: /\.css$/,
+            use: ExtractTextPlugin.extract({
+                fallback: "style-loader",
+                use: "css-loader"
+            })
+        }, {
+            test: /\.(png|jpg|gif)$/,
+            use: [{
+                loader: 'url-loader',
+                options: {
+                    limit: 8192
+                }
+            }]
+        }]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: path.join(__dirname, 'src/index.html')
+        }),
+        new webpack.HashedModuleIdsPlugin(),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor'
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'runtime'
+        }),
+        new ExtractTextPlugin({
+            filename: '[name].[contenthash:5].css',
+            allChunks: true
+        })
+    ],
+
+    resolve: {
+        alias: {
+            pages: path.join(__dirname, 'src/pages'),
+            component: path.join(__dirname, 'src/component'),
+            router: path.join(__dirname, 'src/router'),
+            actions: path.join(__dirname, 'src/redux/actions'),
+            reducers: path.join(__dirname, 'src/redux/reducers')
+        }
+    }
+};
+
+module.exports = commonConfig;

webpack.config.js

@@ -1,79 +1,23 @@
-const path = require('path');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var webpack = require('webpack');
+const merge = require('webpack-merge');
 
+const webpack = require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const commonConfig = require('./webpack.common.config.js');
 
-module.exports = {
+const publicConfig = {
     devtool: 'cheap-module-source-map',
-    entry: {
-        app: [
-            path.join(__dirname, 'src/index.js')
-        ],
-        vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
-    },
-    output: {
-        path: path.join(__dirname, './dist'),
-        filename: '[name].[chunkhash].js',
-        chunkFilename: '[name].[chunkhash].js',
-        publicPath: "/"
-    },
-    module: {
-        rules: [{
-            test: /\.js$/,
-            use: ['babel-loader?cacheDirectory=true'],
-            include: path.join(__dirname, 'src')
-        }, {
-            test: /\.css$/,
-            use: ExtractTextPlugin.extract({
-                fallback: "style-loader",
-                use: "css-loader"
-            })
-        }, {
-            test: /\.(png|jpg|gif)$/,
-            use: [{
-                loader: 'url-loader',
-                options: {
-                    limit: 8192
-                }
-            }]
-        }]
-    },
     plugins: [
-        new CleanWebpackPlugin(['dist']),
+        new CleanWebpackPlugin(['dist/*.*']),
         new UglifyJSPlugin(),
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: path.join(__dirname, 'src/index.html')
-        }),
-        new webpack.HashedModuleIdsPlugin(),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor'
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'runtime'
-        }),
         new webpack.DefinePlugin({
             'process.env': {
                 'NODE_ENV': JSON.stringify('production')
             }
-        }),
-        new ExtractTextPlugin({
-            filename: '[name].[contenthash:5].css',
-            allChunks: true
         })
-    ],
+    ]
 
-    resolve: {
-        alias: {
-            pages: path.join(__dirname, 'src/pages'),
-            component: path.join(__dirname, 'src/component'),
-            router: path.join(__dirname, 'src/router'),
-            actions: path.join(__dirname, 'src/redux/actions'),
-            reducers: path.join(__dirname, 'src/redux/reducers')
-        }
-    }
-};
+};
+
+module.exports = merge(commonConfig, publicConfig);

webpack.dev.config.js

@@ -1,62 +1,33 @@
+const merge = require('webpack-merge');
 const path = require('path');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var webpack = require('webpack');
 
-module.exports = {
+const commonConfig = require('./webpack.common.config.js');
+
+const devConfig = {
     devtool: 'inline-source-map',
     entry: {
         app: [
             'react-hot-loader/patch',
             path.join(__dirname, 'src/index.js')
-        ],
-        vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
+        ]
     },
     output: {
-        path: path.join(__dirname, './dist'),
-        filename: '[name].[hash].js',
-        chunkFilename: '[name].[chunkhash].js'
-    },
-    module: {
-        rules: [{
-            test: /\.js$/,
-            use: ['babel-loader'],
-            include: path.join(__dirname, 'src')
-        }, {
-            test: /\.css$/,
-            use: ['style-loader', 'css-loader']
-        }, {
-            test: /\.(png|jpg|gif)$/,
-            use: [{
-                loader: 'url-loader',
-                options: {
-                    limit: 8192
-                }
-            }]
-        }]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: path.join(__dirname, 'src/index.html')
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor'
-        })
-    ],
-
-    resolve: {
-        alias: {
-            pages: path.join(__dirname, 'src/pages'),
-            component: path.join(__dirname, 'src/component'),
-            router: path.join(__dirname, 'src/router'),
-            actions: path.join(__dirname, 'src/redux/actions'),
-            reducers: path.join(__dirname, 'src/redux/reducers')
-        }
+        /*这里本来应该是[chunkhash]的，但是由于[chunkhash]和react-hot-loader不兼容。只能妥协*/
+        filename: '[name].[hash].js'
     },
     devServer: {
         contentBase: path.join(__dirname, './dist'),
         historyApiFallback: true,
         host: '0.0.0.0',
     }
+};
 
-};
+module.exports = merge({
+    customizeArray(a, b, key) {
+        /*entry.app不合并，全替换*/
+        if (key === 'entry.app') {
+            return b;
+        }
+        return undefined;
+    }
+})(commonConfig, devConfig);