update webpack,sass,pwa(sw-precache->workbox),postcss

Author: xpioneer

build/styleLoaderConf.js

@@ -7,14 +7,21 @@ const postcssLoader = {
   loader: 'postcss-loader',
   options: {
     sourceMap: _DEV_ ? true : false,
-    plugins: [
-      require('autoprefixer'),
-      // require('postcss-pxtorem')({
-      //   rootValue: 40,
-      //   propList: ['*'],
-      //   selectorBlackList: [/^\.(vux|weui)-[\w]*/]
-      // })
-    ]
+    postcssOptions: {
+      plugins: [
+        ['postcss-preset-env', {
+          browsers: '> 0.5%, not dead, iOS >= 7, Android >= 4.3'
+        }]
+      ]
+    },
+    // plugins: [
+    //   require('autoprefixer'),
+    //   // require('postcss-pxtorem')({
+    //   //   rootValue: 40,
+    //   //   propList: ['*'],
+    //   //   selectorBlackList: [/^\.(vux|weui)-[\w]*/]
+    //   // })
+    // ]
   }
 }
 

build/webpack.base.conf.js

@@ -4,7 +4,7 @@ const path = require('path'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
   MiniCssExtractPlugin = require("mini-css-extract-plugin"),
   ManifestPlugin = require('webpack-manifest-plugin'),
-  SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+  {GenerateSW} = require('workbox-webpack-plugin');
 
 const _PROD_ = process.env.NODE_ENV === 'production';
 
@@ -155,7 +155,7 @@ module.exports = {
       maxAsyncRequests: 5,
       maxInitialRequests: 3,
       automaticNameDelimiter: '~',
-      name: true,
+      // name: true,
       cacheGroups: {
         react: {
           name: 'vendor',
@@ -187,36 +187,39 @@ module.exports = {
     //   },
     //   _DEV_: JSON.stringify(_DEV_),
     // }),
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json'
-    }),
-    new SWPrecacheWebpackPlugin({
-      dontCacheBustUrlsMatching: /\.\w{8}\./,
-      filename: 'serviceWorker.js',
-      logger(message) {
-        console.log(message);
-        if (message.indexOf('Total precache size is') === 0) {
-          return;
-        }
-        if (message.indexOf('Skipping static resource') === 0) {
-          return;
-        }
-      },
-      minify: true,
-      navigateFallback: '/index.html',
-      navigateFallbackWhitelist: [/^(?!\/__).*/],
-      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-    }),
+    new GenerateSW(),
+    // new ManifestPlugin({
+    //   fileName: 'asset-manifest.json'
+    // }),
+    // new SWPrecacheWebpackPlugin({
+    //   dontCacheBustUrlsMatching: /\.\w{8}\./,
+    //   filename: 'serviceWorker.js',
+    //   logger(message) {
+    //     console.log(message);
+    //     if (message.indexOf('Total precache size is') === 0) {
+    //       return;
+    //     }
+    //     if (message.indexOf('Skipping static resource') === 0) {
+    //       return;
+    //     }
+    //   },
+    //   minify: true,
+    //   navigateFallback: '/index.html',
+    //   navigateFallbackWhitelist: [/^(?!\/__).*/],
+    //   staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+    // }),
     new MiniCssExtractPlugin({
       filename: "static/css/[name].[contenthash].css",
     }),
     new webpack.ProvidePlugin({
       $http: [resolve('src/utils/http.ts'), 'default'],
       $msg: [resolve('node_modules/antd/es/message/index.js'), 'default']
     }),
-    new CopyWebpackPlugin([{
-      from: resolve('statics'),
-      ignore: ['.*']
-    }])
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: resolve('statics'),
+        // ignore: ['.*']
+      }]
+    })
   ]
 }

build/webpack.dev.conf.js

@@ -1,11 +1,11 @@
 const path = require('path'),
   webpack = require('webpack'),
-  merge = require('webpack-merge'),
+  { merge } = require('webpack-merge'),
   webpackConfig = require('./webpack.base.conf'),
   HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(webpackConfig, {
-  devtool: 'cheap-modules-eval-source-map',
+  devtool: 'eval',
   mode: 'development',
   devServer: {
     port: '8060',

package.json

@@ -45,32 +45,32 @@
     "@types/react-router-dom": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^2.4.0",
     "@typescript-eslint/parser": "^2.4.0",
-    "autoprefixer": "^9.3.1",
     "babel-loader": "^8.0.4",
     "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^1.0.1",
     "eslint": "^6.5.1",
     "eslint-plugin-react": "^7.16.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.0",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
-    "mini-css-extract-plugin": "^0.4.4",
-    "node-sass": "^4.12.0",
+    "mini-css-extract-plugin": "^1.3.3",
+    "node-sass": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
-    "react-hot-loader": "^4.3.12",
-    "sass-loader": "^7.1.0",
+    "postcss-loader": "^4.1.0",
+    "postcss-preset-env": "^6.7.0",
+    "sass-loader": "^10.1.0",
     "style-loader": "^0.23.1",
     "sw-precache-webpack-plugin": "^0.11.5",
     "typescript": "^3.6.4",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.1.2",
-    "webpack": "^4.41.1",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2",
+    "webpack": "^5.10.3",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "^2.0.4",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^5.7.2",
+    "workbox-webpack-plugin": "^6.0.2"
   },
   "husky": {
     "hooks": {

src/pages/dashboard/dashboard.tsx

@@ -7,6 +7,7 @@ export default class Dashboard extends React.Component {
       <div>GraphQL Application. </div>
       <p style={{width: '400PX', height: 40, fontSize: '24px'}}>测试rem</p>
       <div>66px</div>
+      <div className="testcss">9999</div>
     </div>
   }
 }