提取公共配置

Author: yunkui.zhou

server/index.js

@@ -31,8 +31,10 @@ if (process.env.NODE_ENV === 'local') {
   }))
 }
 
-//组件页面
+//以路径名称作为页面区分
+
 app.use('/components', extractMapping, (req, res, next) => {
+  //可以根据路径，针对某一个页面进行服务端渲染
   const content = renderToString(<StaticRouter
     location={req.url}
     context={{}}

server/middleware/extractMapping.js

@@ -21,7 +21,6 @@ const extractMapping = (req, res, next) => {
     }
   }
   global.staticAssetsMapping = mapping
-  console.log(JSON.stringify(global.staticAssetsMapping))
   next()
 }
 

webpack.config.common.js

@@ -2,36 +2,46 @@
  * Created by ink on 2018/4/4.
  */
 const path = require('path')
-let contentPath, publicPath, entry
-entry = {
+const ManifestPlugin = require('webpack-manifest-plugin')
+//这里可以路径前一个名称作为页面区分
+const entry = {
   'components/index': ['./client/pages/example/index.js']
 }
-if (process.env.NODE_ENV === 'local') {
-  contentPath = path.resolve(__dirname, 'public')
-  publicPath = '/'
-  Object.keys(entry).forEach((item, index) => {
-    entry[item].unshift('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true')
+const rules = [{
+  enforce: 'pre',
+  test: '/\.jsx?$/',
+  exclude: /node_modules/,
+  use: ['eslint-loader']
+}, {
+  test: /\.jsx?$/,
+  use: ['babel-loader']
+}, {
+  test: /\.(png|jpg|gif)$/,
+  use: ['url-loader']
+}]
+const plugins = [
+  new ManifestPlugin({
+    fileName: 'mapping.json'
   })
-} else {
-  contentPath = path.resolve(__dirname, 'dist/public/mapping')
-  publicPath = '/mapping/'
-}
+]
 const config = {
   entry,
   target: 'web',
   output: {
-    path: contentPath,
-    publicPath,
     filename: '[name].[hash].js',
     chunkFilename: '[name].[hash].js',
     libraryTarget: 'umd'
   },
+  module: {
+    rules
+  },
   resolve: {
     modules: [
       'node_modules',
       path.resolve(__dirname, 'client'),
       path.resolve(__dirname, 'server')
     ]
   },
+  plugins,
 }
 module.exports = config

webpack.config.js

@@ -1,12 +1,10 @@
-const devConfig = require("./webpack.config.local")
-const proConfig = require("./webpack.config.pro")
 const NODE_ENV = process.env.NODE_ENV
 let config
-if (NODE_ENV === 'development') {
-  config = devConfig
+if (NODE_ENV === 'local') {
+  config = require('./webpack.config.local')
 } else if (NODE_ENV === 'production') {
-  config = proConfig
+  config = require('./webpack.config.pro')
 } else {
-  config = devConfig
+  config = require('./webpack.config.local')
 }
-module.exports = config
+module.exports = config

webpack.config.local.js

@@ -4,46 +4,32 @@
 const path = require('path')
 const webpack = require('webpack')
 const contentPath = path.resolve(__dirname, 'public')
+const commonConfig = require('./webpack.config.common')
 const publicPath = '/'
-const ManifestPlugin = require('webpack-manifest-plugin')
+const copyEntry = Object.assign({}, commonConfig.entry)
+const entry = {}
+Object.keys(copyEntry).map(item => {
+  let temp = [...copyEntry[item]]
+  temp.unshift('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true')
+  entry[item] = temp
+})
+console.log('读取devConfig')
 const config = {
   mode: 'development',
   devtool: 'eval-source-map',
-  entry: {
-    'components/index': ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true', './client/pages/example/index.js']
-  },
-  target: 'web',
-  output: {
+  entry,
+  target: commonConfig.target,
+  output: Object.assign({}, commonConfig.output, {
     path: contentPath,
     publicPath,
-    filename: '[name].[hash].js',
-    chunkFilename: '[name].[hash].js',
-    libraryTarget: 'umd'
-  },
+  }),
   module: {
     rules: [{
-      enforce: 'pre',
-      test: '/\.jsx?$/',
-      exclude: /node_modules/,
-      use: ['eslint-loader']
-    }, {
-      test: /\.jsx?$/,
-      use: ['babel-loader']
-    }, {
       test: /\.less$/,
       use: ['style-loader', 'css-loader', 'less-loader']
-    }, {
-      test: /\.(png|jpg|gif)$/,
-      use: ['url-loader']
-    }]
-  },
-  resolve: {
-    modules: [
-      'node_modules',
-      path.resolve(__dirname, 'client'),
-      path.resolve(__dirname, 'server')
-    ]
+    }, ...commonConfig.module.rules]
   },
+  resolve: commonConfig.resolve,
   watchOptions: {
     aggregateTimeout: 400,
     poll: 1000,
@@ -64,9 +50,7 @@ const config = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
     }),
-    new ManifestPlugin({
-      fileName: 'mapping.json'
-    }),
+    ...commonConfig.plugins
   ]
 }
 module.exports = config

webpack.config.pro.js

@@ -4,60 +4,37 @@
 const path = require('path')
 const webpack = require('webpack')
 const contentPath = path.resolve(__dirname, 'dist/public/mapping')
-const ManifestPlugin = require('webpack-manifest-plugin')
 const ExtractCssChunks = require('extract-text-webpack-plugin')
 const publicPath = '/mapping/'
+const commonConfig = require('./webpack.config.common')
+console.log('读取production')
+console.log(`入口数组：${JSON.stringify(commonConfig.entry)}`)
 const config = {
   mode: 'production',
   devtool: 'source-map',
-  entry: {
-    'components/index': ['./client/index.js']
-  },
-  target: 'web',
-  output: {
+  entry: commonConfig.entry,
+  output: Object.assign({}, commonConfig.output, {
     path: contentPath,
     publicPath,
-    filename: '[name].[hash].js',
-    chunkFilename: '[name].[hash].js',
-    libraryTarget: 'umd'
-  },
+  }),
   module: {
     rules: [{
-      enforce: 'pre',
-      test: '/\.jsx?$/',
-      exclude: /node_modules/,
-      use: ['eslint-loader']
-    }, {
-      test: /\.jsx?$/,
-      use: ['babel-loader']
-    }, {
       test: /\.less$/,
       use: ExtractCssChunks.extract({
         fallback: 'style-loader',
         use: ['css-loader', 'less-loader']
       })
-    }, {
-      test: /\.(png|jpg|gif)$/,
-      use: ['url-loader']
-    }]
-  },
-  resolve: {
-    modules: [
-      'node_modules',
-      path.resolve(__dirname, 'client'),
-      path.resolve(__dirname, 'server')
-    ]
+    }, ...commonConfig.module.rules]
   },
+  resolve: commonConfig.resolve,
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
-    new ManifestPlugin({
-      fileName: 'mapping.json'
-    }),
     new ExtractCssChunks({
       filename: '[name].[id].css'
-    })
+    }),
+    ...commonConfig.plugins
   ]
 }
 module.exports = config