watch: true,
watchOptions: {
  ignored: /node_modules/, // 忽略監(jiān)聽文件
  aggregateTimeout: 300, //文件變動(dòng)后多久發(fā)起構(gòu)建
  poll: 1000, //每秒詢問(wèn)次數(shù)，越小越好
}

// .bablerc
{
 "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

// 示例代碼
Loadable({
 loader: () => import('./component'), //按需加載組件
 loading: Loading, //處理組件加載的loading、error等
 delay: 300 //延遲加載避免loading的閃爍問(wèn)題
});

// Loading組件自定義
// 接受三個(gè)props，其中pastDelay：等待時(shí)觸發(fā)；timedOut：超時(shí)時(shí)觸發(fā)超過(guò)delay；error：出錯(cuò)觸發(fā)默認(rèn)為200ms
const Loading = ({ pastDelay, timedOut, error }) => {
  if (pastDelay) {
   return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>
  } else if (timedOut) {
   return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>
  } else if (error) {
   return <div>Error!</div>;
  }
  return null;
};

optimization: {
  splitChunks: {
   chunks: "all",
   cacheGroups: {
    vendors: { 
      test: /node_modules/,
      name: 'vendors', 
      minSize: 0,
      minChunks: 1, 
      chunks: 'initial',
      priority: 2 // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí)，數(shù)值越大越優(yōu)先處理 
    },
    commons: {
     name: "comomns",
     test: resolve("src/components"), // 可自定義拓展規(guī)則
     minChunks: 2, // 最小共用次數(shù)
     minSize:0,  //代碼最小多大，進(jìn)行抽離
     priority: 1, //該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí)，數(shù)值越大越優(yōu)先處理 
    }
  }
}

optimization: {
  minimizer: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/', //緩存壓縮，默認(rèn)不緩存，設(shè)置存放位置開啟
      test: /.js$/, //匹配需要壓縮的文件，默認(rèn)為/.js$/和Loader配置一樣
      //include: [], 使用正則去選擇需要被壓縮的文件和Loader配置一樣
      //exclude: [], 使用正則去去除不需要被壓縮的文件和Loader配置一樣
      //workerCount: 2, 開啟幾個(gè)子進(jìn)程并發(fā)執(zhí)行壓縮
      // sourceMap: false, 是否輸出source Map，開啟會(huì)導(dǎo)致壓縮變慢
      // uglifyJS: {}, 用于壓縮ES6代碼不可和uglifyJS同時(shí)使用
      uglifyJS:{//壓縮ES5代碼
        output: {
          // 是否輸出可讀性較強(qiáng)的代碼，即會(huì)保留空格和制表符，默認(rèn)為輸出，為了達(dá)到更好的壓縮效果，可以設(shè)置為false
          beautify: false,
          //是否保留代碼中的注釋，默認(rèn)為保留，為了達(dá)到更好的壓縮效果，可以設(shè)置為false
          comments: false
        },
        compress: {
          //是否在UglifyJS刪除沒(méi)有用到的代碼時(shí)輸出警告信息，默認(rèn)為輸出
          warnings: false,
          //是否刪除代碼中所有的console語(yǔ)句，默認(rèn)為不刪除，開啟后，會(huì)刪除所有的console語(yǔ)句
          drop_console: true,
          //是否內(nèi)嵌雖然已經(jīng)定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉(zhuǎn)換成 y = 1, 默認(rèn)為否
          collapse_vars: true,
          // 提取出現(xiàn)多次但是沒(méi)有定義成變量去引用的靜態(tài)值
          reduce_vars:true
        }
      },
    }),
  ]
},

// 提取css到單獨(dú)的文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// optimizeCssPlugin CSS文件壓縮插件
const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

const extractSCSS = new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash:8].css',
  chunkFilename: 'css/[name]_[contenthash:8].css',
  fallback:'style-loader'
});
...
...
plugins: [
  new optimizeCssPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano'),
    cssProcessorOptions: { discardComments: { removeAll: true } },
    canPrint: true
  }),
]

// JavaScript
output: {
  publicPath: '//js.cdn.com/js/',
  path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方
  // 為輸出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根據(jù)模塊內(nèi)容變化；hash: 根據(jù)每次構(gòu)建隨機(jī)）
  filename: "js/[name].[chunkhash:8].js",
  chunkFilename: "js/[name]-[id].[chunkhash:8].js",
},

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [
  new CompressionPlugin({
    filename: '[path].gz[query]', //目標(biāo)資源名稱。[file] 會(huì)被替換成原資源。[path] 會(huì)被替換成原資源路徑，[query] 替換成原查詢字符串
    algorithm: 'gzip',//算法
    test: /\.(js|css)$/,  //壓縮 js 與 css
    threshold: 10240,//只處理比這個(gè)值大的資源。按字節(jié)計(jì)算
    minRatio: 0.8//只有壓縮率比這個(gè)值小的資源才會(huì)被處理
  })
]

const staticCache = require('koa-static-cache');
import config from './configs';

const app = new Koa();

app.use(staticCache(path.resolve(__dirname, "../dist"), {
  maxAge: 7 * 24 * 60 * 60,
  gzip: true, //開啟
  dynamic: true,
}))

{
 "presets": [
  ["env", {
   "modules": false
  }]
 ],
 "plugins": ["syntax-dynamic-import"]
}

const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
plugins: [
   new ModuleConcatPlugin(), //開啟scope Hoisting
 ],