@wbi/cli-service/build/webpack.prod.config.js

local service for wb-cli projects

/**
 * Created by jerry.lin-wun on 2019/1/25.
 * 文件打包配置
 */
process.env.NODE_ENV = 'production'

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const chalk = require('chalk') // 命令行窗口颜色美化
const ProgressBarPlugin = require('progress-bar-webpack-plugin') // 显示构建进度百分比
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const EndWebpackPlugin = require('end-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const utils = require('./utils')
const webpackBase = require('./webpack.base.config')
const wbConfig = utils.wbConfig

// opts.endCallback: 所有任务执行完毕之后的回调
module.exports = function (opts = {}) {
  const webpackBaseConfig = webpackBase({publicPath: opts.publicPath})
  const publicPath = opts.publicPath || wbConfig.publicPath.build

  return webpackMerge(webpackBaseConfig, {

    mode: 'production',

    performance: {
      // 不出现警告信息
      // hints: false,
      // 当出现以下文件大小的时候，出现警告信息
      hints: 'warning', // 枚举
      maxAssetSize: 30000000, // 整数类型（以字节为单位），大概300M
      maxEntrypointSize: 50000000, // 整数类型（以字节为单位），大概50M
      assetFilter: function (assetFilename) {
        // 提供资源文件名的断言函数
        return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
      }
    },

    output: {
      // 所有资源的基础路径，而且一定要以 / 结尾
      // 一般建议填写 / 或 ./
      publicPath
    },

    optimization: {
      runtimeChunk: {
        'name': 'manifest'
      },
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '-',
        name: true,
        cacheGroups: {
          /* vendors: {
             test: path.resolve(__dirname, '../node_modules'),
             minChunks: 1,
             name: 'vendor.js',
             priority: -10
          }, */
          default: false
          /* common: {
           minChunks: 2,
           name: 'commons',
           chunks: 'async',
           priority: 10,
           reuseExistingChunk: true,
           enforce: true
           } */
        }
      },
      minimizer: [
        new UglifyJsPlugin({
          minify: (file, sourceMap) => {
            // https://github.com/mishoo/UglifyJS2#minify-options
            const uglifyJsOptions = {
              // your `uglify-js` package options
              compress: {
                // 清除console.log信息
                drop_console: true
              }
            }
            if (sourceMap) {
              uglifyJsOptions.sourceMap = {
                content: sourceMap
              }
            }
            return require('uglify-js').minify(file, uglifyJsOptions)
          }
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },

    plugins: [
      // 告诉 Webpack 使用了哪些动态链接库
      new webpack.DllReferencePlugin({
        // name: '_dll_vendor',
        // context: path.resolve(__dirname, '../dll'),
        // 描述 vendor 动态链接库的文件内容
        manifest: utils.resolve('./dll/vendor.manifest.json')
      }),

      // 构建进度条
      new ProgressBarPlugin({
        format: '  ' + chalk.cyan.bold('Build') + ' [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
        clear: false
      }),

      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: 'assets/css/[name].[hash:7].css',
        chunkFilename: 'assets/css/[name].[hash:7].css'
      }),

      new EndWebpackPlugin(stats => {
        // 当前哈希值的前7位
        const hash7 = stats.hash.substring(0, 7)
        // 将dll的内容合并到vendors-main.js
        const outPath = webpackBaseConfig.output.path
        const vendorFile = `${outPath}/assets/js/manifest.${hash7}.js`
        const dllContent = fs.readFileSync('./dll/vendor.dll.js', 'utf8')
        const vendorContent = fs.readFileSync(vendorFile, 'utf8')
        const staticPath = 'var staticPath = "'+ path.posix.join(publicPath, 'static') +'";'
        const commonStaticPath = 'var commonStaticPath = "'+ path.posix.join(publicPath, 'commonStatic') +'";'
        fs.writeFileSync(vendorFile, commonStaticPath + staticPath + dllContent + vendorContent)
        // 合并静态资源文件为vendor.js、vendor.css、vendor-static.js、vendor-static.css
        const staticAssets = utils.copyObject(true, {}, wbConfig.staticAssets)
        const commonStaticAssets = utils.copyObject(true, {}, wbConfig.commonStaticAssets)
        utils.mergeStaticAssets({
          type: 'commonStatic',
          staticTemplate: '{commonStaticPath}',
          directory: wbConfig.commonStaticDirectory,
          modifyName: '',
          outPath,
          staticAssets: commonStaticAssets
        })
        utils.mergeStaticAssets({
          type: 'static',
          staticTemplate: '{staticPath}',
          directory: wbConfig.staticDirectory,
          modifyName: '-static',
          outPath,
          staticAssets,
          // 为合并的静态资源文件名称注入hash版本号
          hash7: wbConfig.private.sitePath.currentSite.hash
        })
        // 完成webpack编译的回调
        opts.endCallback && opts.endCallback()
      }, err => {
        console.error('after webpack exit with error', err)
      }),

      // 拷贝static资源到生成的目录
      new CopyWebpackPlugin([
        {
          from: wbConfig.staticDirectory,
          to: 'static',
          ignore: ['.*']
        },
        {
          from: wbConfig.commonStaticDirectory,
          to: 'commonStatic',
          ignore: ['.*']
        }
      ])
    ].concat(utils.getHtmlPluginsInBuildList()),

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../../'
              }
            },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                ...require(utils.resolveConfig('./postcss.config'))
              }
            }
          ]
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../../'
              }
            },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                ...require(utils.resolveConfig('./postcss.config'))
              }
            },
            'sass-loader'
          ]
        }
      ]
    }

  })
}