提取公共配置

build/webpack.common.js

@@ -0,0 +1,64 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+const commonConfig = {
+    module: {                 // 让 webpack 能够去处理那些非 JavaScript 文件
+        rules: [{
+            test: /\.js$/,    // 注意这里要写正确，不然useBuiltIns不起作用
+            exclude: /node_modules/, // 排除node_modules中的代码
+            use: [{
+                loader: 'babel-loader', // 只是babel和webpack之间的桥梁，并不会将代码转译
+            }]
+        }, {
+            test: /\.less$/,
+            exclude: /node_modules/,
+            use: ['style-loader',
+                {
+                    loader: 'css-loader',
+                    options: {
+                        importLoaders: 2
+                    }
+                }, 'less-loader', 'postcss-loader']
+        },
+        {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader', 'postcss-loader']
+        },
+        {
+            test: /\.(png|jpg|gif|jpeg)$/,
+            use: {
+                loader: 'url-loader',
+                options: {
+                    name: '[name]_[hash].[ext]', // placeholder 占位符
+                    outputPath: 'images/', // 打包文件名
+                    limit: 204800, // 小于200kb则打包到js文件里，大于则打包到imgages里
+                },
+            },
+        },
+        {
+            test: /\.(eot|woff2?|ttf|svg)$/,
+            use: {
+                loader: 'url-loader',
+                options: {
+                    name: '[name]-[hash:5].min.[ext]',
+                    outputPath: 'fonts/',
+                    limit: 5000,
+                }
+            },
+        }]
+    },
+    plugins: [                     
+        new HtmlWebpackPlugin({   // 向dist文件中自动添加模版html
+            template: 'src/index.html',
+        }),
+        new CleanWebpackPlugin(), // 打包后先清除dist文件，先于HtmlWebpackPlugin运行
+    ],
+    output: {
+        publicPath: "/",
+        filename: 'bundle.js',  // 打包后文件名称
+        path: path.resolve(__dirname, '../dist') // 打包后文件夹存放路径
+    }
+}
+
+module.exports = commonConfig;

build/webpack.dev.js

@@ -1,9 +1,9 @@
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
 
-module.exports = {
+const devConfig = {
     mode: 'development',      // 模式，表示dev环境
     devtool:"cheap-module-eval-source-map",
     entry: {                  // 入口文件
@@ -13,63 +13,11 @@ module.exports = {
     devServer: {
         contentBase: path.join(__dirname, '../dist')
     },
-    module: {                 // 让 webpack 能够去处理那些非 JavaScript 文件
-        rules: [{
-            test: /\.js$/,    // 注意这里要写正确，不然useBuiltIns不起作用
-            exclude: /node_modules/, // 排除node_modules中的代码
-            use: [{
-                loader: 'babel-loader', // 只是babel和webpack之间的桥梁，并不会将代码转译
-            }]
-        }, {
-            test: /\.less$/,
-            exclude: /node_modules/,
-            use: ['style-loader',
-                {
-                    loader: 'css-loader',
-                    options: {
-                        importLoaders: 2
-                    }
-                }, 'less-loader', 'postcss-loader']
-        },
-        {
-            test: /\.css$/,
-            use: ['style-loader', 'css-loader', 'postcss-loader']
-        },
-        {
-            test: /\.(png|jpg|gif|jpeg)$/,
-            use: {
-                loader: 'url-loader',
-                options: {
-                    name: '[name]_[hash].[ext]', // placeholder 占位符
-                    outputPath: 'images/', // 打包文件名
-                    limit: 204800, // 小于200kb则打包到js文件里，大于则打包到imgages里
-                },
-            },
-        },
-        {
-            test: /\.(eot|woff2?|ttf|svg)$/,
-            use: {
-                loader: 'url-loader',
-                options: {
-                    name: '[name]-[hash:5].min.[ext]',
-                    outputPath: 'fonts/',
-                    limit: 5000,
-                }
-            },
-        }]
-    },
     plugins: [                     // 插件
-        new HtmlWebpackPlugin({   // 向dist文件中自动添加模版html
-            template: 'src/index.html',
-        }),
-        new CleanWebpackPlugin(), // 打包后先清除dist文件，先于HtmlWebpackPlugin运行
-        //new webpack.NamedModulesPlugin(),  //用于启动HMR时可以显示模块的相对路径
+        new webpack.NamedModulesPlugin(),  //用于启动HMR时可以显示模块的相对路径
         new webpack.HotModuleReplacementPlugin(), // 开启模块热更新，热加载和模块热更新不同，热加载是整个页面刷新
     ],
-    output: {
-        publicPath: "/",
-        filename: 'bundle.js',  // 打包后文件名称
-        path: path.resolve(__dirname, '../dist') // 打包后文件夹存放路径
-    }
+    output: {}
 }
 
+module.exports = merge.smart(commonConfig, devConfig)

build/webpack.prod.js

@@ -0,0 +1,15 @@
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+const prodConfig = {
+    mode: "production",  // 只要在生产模式下， 代码就会自动压缩
+    devtool:"cheap-module-source-map",
+    entry: {
+        main: './src/index.js'
+    },  
+    module: {},
+    plugins: [],
+    output: {}
+}
+
+module.exports = merge.smart(commonConfig, prodConfig)

package.json

@@ -5,7 +5,9 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node ./build/dev-server.js"
+    "start": "node ./build/dev-server.js",
+    "dev-build": "webpack --config ./build/webbpack.dev.js",
+    "build": "webpack --config ./build/webpack.prod.js"
   },
   "repository": {
     "type": "git",
@@ -25,10 +27,8 @@
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.6.0",
     "babel-loader": "^8.0.6",
-    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.0.0",
     "file-loader": "^4.0.0",
-    "html-webpack-plugin": "^3.2.0",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "postcss-loader": "^3.0.0",
@@ -45,15 +45,18 @@
     "@babel/polyfill": "^7.4.4",
     "antd": "^3.19.8",
     "babel-plugin-import": "^1.12.0",
+    "clean-webpack-plugin": "^3.0.0",
     "connect-history-api-fallback": "^1.6.0",
     "core-js": "^2.6.9",
     "dva": "^2.4.1",
     "history": "^4.9.0",
+    "html-webpack-plugin": "^3.2.0",
     "qhistory": "^1.0.3",
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1"
+    "react-router-dom": "^5.0.1",
+    "webpack-merge": "^4.2.1"
   }
 }