webpack4---高级篇

yarn add purify-css purifycss-webpack -D
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// 去除无用的css
plugins: [
    new PurifyCSSPlugin({
      // 路劲扫描 nodejs内置 路劲检查
      paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
    })
]

yarn add webpack-parallel-uglify-plugin -D
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new WebpackParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false, //不需要格式化
          comments: false //不保留注释
        },
        compress: {
          warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
          drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
          collapse_vars: true, // 内嵌定义了但是只用到一次的变量
          reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
        }
      }
    })
]

// webpack4最新配置，可以搜索关键字查查配置项
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },

在package.json中
  "scripts": {
    "build": "webpack --mode development",
    "build:dll": "webpack --config webpack.dll.config.js --mode development",
    "dev": "webpack-dev-server --open --mode development"
  }
新建webpack.dll.config.js  
const path = require('path')
const webpack = require('webpack')

/**
 * 尽量减小搜索范围
 * target: '_dll_[name]' 指定导出变量名字
 */

 module.exports = {
   entry: {
     vendor: ['jquery', 'lodash']
   },
   output: {
     path: path.join(__dirname, 'static'),
     filename: '[name].dll.js',
     library: '_dll_[name]' // 全局变量名，其他模块会从此变量上获取里面模块
   },
   // manifest是描述文件
   plugins: [
     new webpack.DllPlugin({
       name: '_dll_[name]',
       path: path.join(__dirname, 'manifest.json')
     })
   ]
 }
 
在webpack.config.js中
plugins: [
    new webpack.DllReferencePlugin({
        manifest: path.join(__dirname, 'manifest.json')
    })
]
执行npm run build:dll 就可以打包第三方包了

npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

  {
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
    include: [resolve('src')],
    exclude: /node_modules/,
  }
  
  plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool
    })
]

yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
]