修改配置

build/webpack.base.js

+const path = require('path');
+const webpack = require('webpack');
+
+function resolveRoot(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+module.exports = {
+  entry: {
+    vendor: ['babel-polyfill', 'react'],
+    app: resolveRoot('src/index.js')
+  },
+  output: {
+    filename: 'js/[name].[contenthash:8].js',
+    path: resolveRoot('dist')
+  },
+  plugins: [new webpack.NamedModulesPlugin()],
+  resolve: {
+    extensions: ['.js', '.json', '.jsx', '.vue', '.scss', '.less'],
+    alias: {
+      '@utils': resolveRoot('src/utils/index.js'),
+      '@static': resolveRoot('src/static'),
+      '@': resolveRoot('src')
+    }
+  },
+  optimization: {
+    runtimeChunk: true,
+    splitChunks: {
+      chunks: 'all'
+    }
+  }
+};

config/webpack.dev.js → build/webpack.dev.js

@@ -3,19 +3,20 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 const os = require('os');
-const env = require(`./dev.env`);
+const merge = require('webpack-merge');
+
+const base = require('./webpack.base.js');
+const env = require(`../config/dev.env`);
 function resolveRoot(dir) {
   return path.join(__dirname, '..', dir);
 }
-module.exports = {
-  entry: {
-    app: ['babel-polyfill', './src/index.js'],
-    vendor: ['react', 'better-scroll', 'react-redux', 'react-lazyload']
-  },
+module.exports = merge(base, {
+  // entry: {
+  //   vendor: ['react', 'better-scroll', 'react-redux', 'react-lazyload']
+  // },
   output: {
-    publicPath: '/',
-    filename: 'js/[name].[hash:8].js',
-    path: resolve(__dirname, '../build')
+    publicPath: '/'
+    // filename: 'js/[name].[hash:8].js',
   },
   module: {
     rules: [
@@ -105,10 +106,9 @@ module.exports = {
       'process.env': env
     }),
     new HtmlWebpackPlugin({
-      template: './public/index.html'
+      template: resolveRoot('index.html')
     }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin()
+    new webpack.HotModuleReplacementPlugin()
   ],
   mode: 'development',
   devServer: {
@@ -118,19 +118,5 @@ module.exports = {
     open: true,
     port: 5000,
     hot: true
-  },
-  resolve: {
-    extensions: ['.js', '.json', '.jsx', '.vue', '.scss', '.less'],
-    alias: {
-      '@utils': resolveRoot('src/utils/index.js'),
-      '@static': resolveRoot('src/static'),
-      '@': resolveRoot('src')
-    }
-  },
-  optimization: {
-    runtimeChunk: true,
-    splitChunks: {
-      chunks: 'all'
-    }
   }
-};
+});

config/webpack.prod.js → build/webpack.prod.js

@@ -8,22 +8,20 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
 const PrerenderSPAPlugin = require('prerender-spa-plugin');
 const PreloadWebpackPlugin = require('preload-webpack-plugin');
-const env = require(`./${process.env.ENV_MARK}.env`);
-console.log('env', process.env.ENV_MARK, env);
+
+const merge = require('webpack-merge');
+
+const base = require('./webpack.base.js');
+const env = require(`../config/${process.env.ENV_MARK}.env`);
 
 const os = require('os');
 function resolveRoot(dir) {
   return path.join(__dirname, '..', dir);
 }
-module.exports = {
-  entry: {
-    app: ['babel-polyfill', './src/index.js'],
-    vendor: ['react']
-  },
+module.exports = merge(base, {
   output: {
-    publicPath: '/new/',
-    filename: 'js/[name].[contenthash:8].js',
-    path: resolve(__dirname, '../dist')
+    publicPath: '/new/'
+    // filename: 'js/[name].[contenthash:8].js'
   },
   module: {
     rules: [
@@ -151,7 +149,8 @@ module.exports = {
       'process.env': env
     }),
     new HtmlWebpackPlugin({
-      template: './public/index.html',
+      template: resolveRoot('index.html'),
+      favicon: 'favicon.ico',
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -165,6 +164,21 @@ module.exports = {
         minifyURLs: true
       }
     }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[contenthash:8].css'
+    }),
+    new CleanWebpackPlugin(),
+    new OptimizeCssAssetsWebpackPlugin({
+      cssProcessPluginOptions: {
+        preset: ['default', { discardComments: { removeAll: true } }]
+      }
+    }),
+    new webpack.HashedModuleIdsPlugin()
+    // new PrerenderSPAPlugin({
+    //   routes: ['/', '/home', '/shop'],
+    //   staticDir: resolve(__dirname, '../dist')
+    // })
+
     // new PreloadWebpackPlugin({
     //   rel: 'preload',
     //   as(entry) {
@@ -176,41 +190,12 @@ module.exports = {
     //   include: 'allChunks'
     //   //include: ['app']
     // }),
-    new webpack.NamedModulesPlugin(),
     // new WorkboxPlugin.GenerateSW({
     //   clientsClaim: true,
     //   skipWaiting: true,
     //   importWorkboxFrom: 'local',
     //   include: [/\.js$/, /\.css$/, /\.html$/, /\.jpg/, /\.jpeg/, /\.svg/, /\.webp/, /\.png/]
     // }),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash:8].css'
-    }),
-    new CleanWebpackPlugin(),
-    new OptimizeCssAssetsWebpackPlugin({
-      cssProcessPluginOptions: {
-        preset: ['default', { discardComments: { removeAll: true } }]
-      }
-    }),
-    new webpack.HashedModuleIdsPlugin()
-    // new PrerenderSPAPlugin({
-    //   routes: ['/', '/home', '/shop'],
-    //   staticDir: resolve(__dirname, '../dist')
-    // })
   ],
-  mode: 'production',
-  resolve: {
-    extensions: ['.js', '.json', '.jsx', '.vue', '.scss', '.less'],
-    alias: {
-      '@utils': resolveRoot('src/utils/index.js'),
-      '@static': resolveRoot('src/static'),
-      '@': resolveRoot('src')
-    }
-  },
-  optimization: {
-    runtimeChunk: true,
-    splitChunks: {
-      chunks: 'all'
-    }
-  }
-};
+  mode: 'production'
+});

package.json

@@ -70,20 +70,26 @@
     "workbox-webpack-plugin": "^4.3.1"
   },
   "scripts": {
-    "start": "webpack-dev-server --config ./config/webpack.dev.js",
-    "dev": "webpack-dev-server --config ./config/webpack.dev.js",
+    "start": "better-npm-run build:dev",
+    "dev": "better-npm-run build:dev",
     "build:test": "better-npm-run build:test",
-    "build:prod": "better-npm-run build:test"
+    "build:prod": "better-npm-run build:prod"
   },
   "betterScripts": {
+    "build:dev": {
+      "command": "webpack --config  ./build/webpack.dev.js",
+      "env": {
+        "ENV_MARK": "development"
+      }
+    },
     "build:test": {
-      "command": "webpack --config  ./config/webpack.prod.js",
+      "command": "webpack --config  ./build/webpack.prod.js",
       "env": {
         "ENV_MARK": "testing"
       }
     },
     "build:prod": {
-      "command": "webpack --config  ./config/webpack.prod.js",
+      "command": "webpack --config  ./build/webpack.prod.js",
       "env": {
         "ENV_MARK": "production"
       }
@@ -92,7 +98,9 @@
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "better-npm-run": "^0.1.1",
-    "preload-webpack-plugin": "^3.0.0-beta.3"
+    "copy-webpack-plugin": "^5.0.3",
+    "preload-webpack-plugin": "^3.0.0-beta.3",
+    "webpack-merge": "^4.2.1"
   },
   "theme": {
     "brand-primary": "red",

src/pages/home/index.jsx

 import React from 'react';
 import { Tabs, Badge, Carousel, NoticeBar } from 'antd-mobile';
-import BScroll from 'better-scroll';
+// import BScroll from 'better-scroll';
 import { connect } from 'react-redux';
 import LazyLoad, { forceCheck } from 'react-lazyload';
 import './index.less';