const Jarvis = require("webpack-jarvis");

plugins: [
 new Jarvis({
  watchOnly: false,
  port: 3001 // optional: set a port
 })
];

{
  test: /\.js$/,
  use: [
    'babel-loader?cacheDirectory',//開啟轉換結果緩存
  ],
  include: path.resolve(__dirname, 'src'),//只對src目錄中文件采用babel-loader
  exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目錄下的文件
},

resolve: {
    modules: [path.resolve(__dirname, 'node_modules')],
  }

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  mode: 'production',
  entry: {
    // 將React相關模塊放入一個動態鏈接庫
    react: ['react','react-dom','react-router-dom','react-loadable'],
    librarys: ['wangeditor'],
    utils: ['axios','js-cookie']
  },
  output: {
    filename: '[name]-dll.js',
    path: path.resolve(__dirname, 'dll'),
    // 存放動態鏈接庫的全局變量名，加上_dll_防止全局變量沖突
    library: '_dll_[name]'
  },
  // 動態鏈接庫的全局變量名稱，需要可output.library中保持一致，也是輸出的manifest.json文件中name的字段值
  // 如react.manifest.json字段中存在"name":"_dll_react"
  plugins: [
    new DllPlugin({
      name: '_dll_[name]',
      path: path.join(__dirname, 'dll', '[name].manifest.json')
    })
  ]
}

const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
...
plugins: [
  // 告訴webpack使用了哪些動態鏈接庫
    new DllReferencePlugin({
      manifest: require('./dll/react.manifest.json')
    }),
    new DllReferencePlugin({
      manifest: require('./dll/librarys.manifest.json')
    }),
    new DllReferencePlugin({
      manifest: require('./dll/utils.manifest.json')
    }),
]

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({size: 5}); //構建共享進程池，包含5個進程
...
plugins: [
  // happypack并行處理
  new HappyPack({
    // 用唯一ID來代表當前HappyPack是用來處理一類特定文件的，與rules中的use對應
    id: 'babel',
    loaders: ['babel-loader?cacheDirectory'],//默認設置loader處理
    threadPool: happyThreadPool,//使用共享池處理
  }),
  new HappyPack({
    // 用唯一ID來代表當前HappyPack是用來處理一類特定文件的，與rules中的use對應
    id: 'css',
    loaders: [
      'css-loader',
      'postcss-loader',
      'sass-loader'],
      threadPool: happyThreadPool
  })
],
module: {
  rules: [
  {
    test: /\.(js|jsx)$/,
    use: ['happypack/loader?id=babel'],
    exclude: path.resolve(__dirname,' ./node_modules'),
  },
  {
    test: /\.(scss|css)$/,
    //使用的mini-css-extract-plugin提取css此處，如果放在上面會出錯
    use: [MiniCssExtractPlugin.loader,'happypack/loader?id=css'],
    include:[
      path.resolve(__dirname,'src'),
      path.join(__dirname, './node_modules/antd')
    ]
  },
}

...
minimizer: [
  // webpack:production模式默認有配有js壓縮，但是如果這里設置了css壓縮，js壓縮也要重新設置,因為使用minimizer會自動取消webpack的默認配置
  new optimizeCssPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano'),
    cssProcessorOptions: { discardComments: { removeAll: true } },
    canPrint: true
  }),
  new ParallelUglifyPlugin({
    cacheDir: '.cache/',
    uglifyJS:{
      output: {
      // 是否輸出可讀性較強的代碼，即會保留空格和制表符，默認為輸出，為了達到更好的壓縮效果，可以設置為false
        beautify: false,
    //是否保留代碼中的注釋，默認為保留，為了達到更好的壓縮效果，可以設置為false
        comments: false
      },
      compress: {
      //是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認為輸出
        warnings: false,
      //是否刪除代碼中所有的console語句，默認為不刪除，開啟后，會刪除所有的console語句
        drop_console: true,
      //是否內嵌雖然已經定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉換成 y = 1, 默認為否
        collapse_vars: true,
      }
    }
}),
]