webpack5

 

 

通过持久缓存提高构建性能
使用更好的算法和默认值来改善长期缓存
通过更好的树摇和代码生成来改善捆绑包大小
清除处于怪异状态的内部结构
通过引入重大更改来为将来的功能做准备
—————————————————————————————————————————————————————————

webpack从入门到精通

webpack 、 webpack-cli 、 webpack-dev-server
五大核心概念
    Entry
    Output
    Loader
    Plugins
    Mode

开发环境配置
    处理css资源:    css-loader 、 style-loader 、less-loader
    处理Html资源:   html-webpack-plugin
    处理img资源:    url-loader 、 html-loader
    处理其他资源:   file-loader

生产环境配置
    提取css成单独文件:  mini-css-extract-plugin
    css兼容性处理:      postcss-loader 、 postcss-preset-env 、 optimize-css-assets-webpack-plugin
    JS语法检查:         eslint-loader 、 eslint 、 eslint-config-airbnb-base 、 eslint-plugin-import
    JS兼容性处理:       babel-loader 、 @babel/core 、 @babel/preset-env 、 @babel/polyfill 、 core-js
    JS压缩 、 Html压缩
    HMR:                hot热模块替换
    source-map:         开发调试模式，映射源代码
    oneOf:              只处理一次
    缓存:               hash 、 chunkhash 、 contenthash
    树摇:               去除无用代码
    codeSplit:          代码分割(并行加载/按需加载)
    懒加载/预加载
    pwa                 workbox-webpack-plugin
    多进程打包           thread-loader
    externals           让某些文件不打包
    dll                 单独打包