1. 可用于生产环境

优化babel-loader

例：

{
    test:/\.js$/,
    use:['babel-loader?cacheDirectiory'],//开启缓存
    inclued:path.resolve(__dirname,'src'),//明确范围
    // //排除范围，include 和exclude 两者选一个即可
    // exclued:path.resolve(__dirname,'node_modules')
}

1. 开启缓存
2. 明确范围

IgnorePlugin 避免引入无用模块

noParse 避免重复打包

比如 react vue 已经模块化处理过了 就不需要再打包了

IgnorePlugin vs noParse

• IgnorePlugin 直接不引入，代码中没有
• noParse引入，但不打包

happyPack 多进程打包

ParallelUglifyPlugin多进程压缩JS

2.不用于生产环境

1. 自动刷新
2. 热更新
3. DllPlugin 动态连接库插件 前端框架（vue/React）体积大，构建慢，稳定，所以需要缓存框架

3.优化产出代码

1. 小图片base64编码
2. bundle加hash
3. 懒加载
4. 提取公共代码
5. 使用CDN加速
6. IgnorePlugin
7. 使用production
8. ScopeHosting