node版本

node版本最低需要v10.13.0

功能清除

• require.includes语法被废弃 ，这个语法是模块预加载
• 不再为node加载全部的polyfill，如果某个模块依赖了node.js的核心模块，之前的版本会将node的polyfill整个引入，5则不会

长期缓存

确定的moduleIds/chunkIds和导出名称
文件没有改变，就不会改变

持久化缓存

4里面需要使用cache-loader去做些优化
5里面默认支持，cache字段控制

启动

运行命令后，npm会让命令行工具进入，node_module下的bin目录去找是否存在webpack.sh/webpack.cmd,存在就执行，不存在就抛出错误

运行目录：node_modules/webpack/bin/webpack.js

loader

loader是一个导出为函数的javaScrpt模块

多个loader串行执行，从右往左

module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }
  ]
}

vue中的代码分割（路由懒加载）

结合异步组件和webpack的代码分割功能来实现路由组件的懒加载

链接地址 https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

首先，将异步组件定义为返回一个Promise的工厂函数
const foo = () => Promise.resolve({ /*组件定义对象*/ }) 
然后根据webpack代码分割规则，定义分割点
import('./Foo.vue')  // 返回Promise

1、压缩输出
我们将使用 -p(production) 这个 webpack 编译标记，来启用 uglifyjs 压缩插件。
从 webpack 4 开始，也可以通过 "mode" 配置选项轻松切换到压缩输出，只需设置为 "production"。

是因为使用了mode为生产模式，webpack会自动应用优化插件

webpack.optimize.UglifyJsPlugin
上面的压缩混淆插件在webpack版本小于3.0时，使用的是v0.4.6版本
在webpack4中计划使用1.0.0版本，最新的使用按照官网上的步骤来，下载安装uglifyjs-webpack-plugin