mpvue引入echarts之后vendor.js文件过大

柔光的暖阳◎ 2022-01-28 18:11 431阅读 0赞

## 在build/webpack.base.conf.js下添加： ##

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
        new UglifyJsPlugin({ 
          sourceMap: true
        })

## 完整代码 ##

var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    // var HtmlWebpackPlugin = require('html-webpack-plugin')
    var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
    var MpvueVendorPlugin = require('webpack-mpvue-vendor-plugin')
    
    // copy from ./webpack.prod.conf.js
    var path = require('path')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var CopyWebpackPlugin = require('copy-webpack-plugin')
    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    
    // add hot-reload related code to entry chunks
    // Object.keys(baseWebpackConfig.entry).forEach(function (name) { 
    // baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
    // })
    var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    
    module.exports = merge(baseWebpackConfig, { 
      module: { 
        rules: utils.styleLoaders({ 
          sourceMap: config.dev.cssSourceMap,
          extract: true
        })
      },
      // cheap-module-eval-source-map is faster for development
      // devtool: '#cheap-module-eval-source-map',
      // devtool: '#source-map',
      output: { 
        path: config.build.assetsRoot,
        // filename: utils.assetsPath('[name].[chunkhash].js'),
        // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
        filename: utils.assetsPath('[name].js'),
        chunkFilename: utils.assetsPath('[id].js')
      },
      plugins: [
        new webpack.DefinePlugin({ 
          'process.env': config.dev.env
        }),
    
        // copy from ./webpack.prod.conf.js
        // extract css into its own file
        new ExtractTextPlugin({ 
          // filename: utils.assetsPath('[name].[contenthash].css')
          filename: utils.assetsPath(`[name].${ config.dev.fileExt.style}`)
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({ 
          cssProcessorOptions: { 
            safe: true
          }
        }),
        new webpack.optimize.CommonsChunkPlugin({ 
          name: 'common/vendor',
          minChunks: function (module, count) { 
            // any required modules inside node_modules are extracted to vendor
            return (
              module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.indexOf('node_modules') >= 0
            ) || count > 1
          }
        }),
        new webpack.optimize.CommonsChunkPlugin({ 
          name: 'common/manifest',
          chunks: ['common/vendor']
        }),
        new MpvueVendorPlugin({ 
          platform: process.env.PLATFORM
        }),
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        // new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        // new HtmlWebpackPlugin({ 
        // filename: 'index.html',
        // template: 'index.html',
        // inject: true
        // }),
        new FriendlyErrorsPlugin(),
        new UglifyJsPlugin({ 
          sourceMap: true
        })
      ]
    })