升级webpack打包

Ljhhhhhh · Apr 30, 2020 · 614d2bf · 614d2bf
1 parent e9f4165
commit 614d2bf
Show file tree

Hide file tree

Showing 5 changed files with 466 additions and 1,444 deletions.
diff --git a/.sentryclirc b/.sentryclirc
diff --git a/package.json b/package.json
@@ -9,13 +9,11 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
-    "@sentry/integrations": "^5.7.1",
     "axios": "^0.19.0",
     "core-js": "2.6.5",
     "dayjs": "^1.8.16",
     "js-cookie": "^2.2.1",
     "lib-flexible": "^0.3.2",
-    "raven-js": "^3.27.2",
     "vant": "^2.2.5",
     "vo-pages": "^1.0.8",
     "vue": "^2.6.10",
@@ -24,7 +22,6 @@
   },
   "devDependencies": {
     "@babel/register": "^7.6.2",
-    "@sentry/webpack-plugin": "^1.9.1",
     "@vue/cli-plugin-babel": "^3.11.0",
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
@@ -38,8 +35,12 @@
     "compression-webpack-plugin": "^3.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "glob": "^7.1.6",
+    "happypack": "^5.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "mockjs": "^1.0.1-beta3",
     "postcss-pxtorem": "^4.0.1",
+    "purgecss-webpack-plugin": "^2.1.2",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "^2.1.4",

diff --git a/src/App.vue b/src/App.vue
@@ -47,4 +47,10 @@ export default {
   left: 0;
   // background-color: #fff;
 }
+
+.dis {
+  display: flex;
+  width: 200px;
+  height: 200px;
+}
 </style>
diff --git a/vue.config.js b/vue.config.js
@@ -1,6 +1,9 @@
 const path = require('path')
+const glob = require('glob')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
+const HappyPack = require('happypack')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const port = process.env.port || process.env.npm_config_port || 8888
 const cdnDomian = './' // cdn域名，如果有cdn修改成对应的cdn
@@ -25,6 +28,10 @@ const externals = {
   'js-cookie': 'Cookies'
 }
 
+const PATHS = {
+  src: path.join(__dirname, 'src')
+}
+
 function resolve (dir) {
   return path.join(__dirname, dir)
 }
@@ -62,12 +69,12 @@ module.exports = {
     resolve: {
       alias: {
         '@': resolve('src'), // 主目录
-        'views': resolve('src/views'), // 页面
-        'components': resolve('src/components'), // 组件
-        'api': resolve('src/api'), // 接口
-        'utils': resolve('src/utils'), // 通用功能
-        'assets': resolve('src/assets'), // 静态资源
-        'style': resolve('src/style') // 通用样式
+        views: resolve('src/views'), // 页面
+        components: resolve('src/components'), // 组件
+        api: resolve('src/api'), // 接口
+        utils: resolve('src/utils'), // 通用功能
+        assets: resolve('src/assets'), // 静态资源
+        style: resolve('src/style') // 通用样式
       }
     }
   },
@@ -76,10 +83,7 @@ module.exports = {
     config.plugins.delete('prefetch') // TODO: need test
 
     // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
+    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
     config.module
       .rule('icons')
       .test(/\.svg$/)
@@ -97,62 +101,77 @@ module.exports = {
       .rule('vue')
       .use('vue-loader')
       .loader('vue-loader')
-      .tap(options => {
+      .tap((options) => {
         options.compilerOptions.preserveWhitespace = true
         return options
       })
       .end()
 
     config
-    // https://webpack.js.org/configuration/devtool/#development
-      .when(process.env.NODE_ENV === 'development',
-        config => config.devtool('cheap-source-map')
+      // https://webpack.js.org/configuration/devtool/#development
+      .when(process.env.NODE_ENV === 'development', (config) =>
+        config.devtool('cheap-source-map')
       )
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
+    config.when(process.env.NODE_ENV !== 'development', (config) => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [
+          {
             // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          config.optimization.runtimeChunk('single')
+            inline: /runtime\..*\.js$/
+          }
+        ])
+        .end()
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          libs: {
+            name: 'chunk-libs',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: 'initial' // only package third parties that are initially dependent
+          },
+          commons: {
+            name: 'chunk-commons',
+            test: resolve('src/components'), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true
+          }
         }
-      )
+      })
+      config.optimization.runtimeChunk('single')
+    })
     if (IS_PRODUCTION) {
       // config.plugin('analyzer').use(BundleAnalyzerPlugin)
-      config.plugin('html').tap(args => {
+      config.plugin('html').tap((args) => {
         args[0].cdn = cdn
         return args
       })
       config.externals(externals)
-      config.plugin('html').tap(args => {
+      config.plugin('html').tap((args) => {
         args[0].minify.minifyCSS = true // 压缩html中的css
         return args
       })
+      config.plugin('HappyPack').use(HappyPack, [
+        {
+          loaders: [
+            {
+              loader: 'babel-loader?cacheDirectory=true'
+            }
+          ]
+        }
+      ])
+      // TODO:: tree sharking 无用css
+      // TODO:: https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans 看一下 文档
+      config
+        .plugin('pruecss')
+        .use(PurgecssPlugin)
+        .tap(() => ({
+          paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
+        }))
       // gzip需要nginx进行配合
       config
         .plugin('compression')
@@ -190,7 +209,8 @@ module.exports = {
     modules: false,
     loaderOptions: {
       sass: {
-        data: '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/common.scss";' // 全局引入
+        data:
+          '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/common.scss";' // 全局引入
       }
     }
   }