webpack配置笔记

webpack核心:
    常用的loader：
    babel-loader、ts-loader
    样式相关
    style-loader、css-loader、less-loader、postcss-loader
    文件相关
    file-loader、url-loader

path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径

BroswersList需要兼容的浏览器 可以设置在package.jason或.browserslistrc
"browserslist":[">=1%","last 2 versions"]

babel：编译打包js（兼容）
    babel-loader babel-core 编译es6,7,8
    babel-preset  指定规范的版本，根据es兼容来编译js
    babel-polyfill
    babel-plugin-transform-runtime

常用的plugins：
    优化相关
    CommonsChunkPlugin、UglifyjsWebpackPlugin
    功能相关
    ExtractTextWebpackPlugin、HtmlWebpackPlugin、HotModuleReplacementPlugin、CopyWebpackPlugin

chunk：代码块
bundle：打包

    
提取公共代码的插件:
CommonsChunkPlugin: 是webpack内置的插件=> webpack.optimize.CommonsChunkPlugin只适合多entry的情况
    配置（option）：options.name or options.names 代码块的名称
                    options.filename 公共代码打包后的文件名
                    options.minChunks 如果是number公共代码出现的次数至少是多少，function自定义逻辑，Infinity
                    options.chunks 提起公共代码的范围
                    options.children 子模块中查找共同依赖
                    options.deepChildren
                    options.async 创建异步代码的公共代码流或块

代码分割和懒加载
    分离业务代码和第三方依赖
    分离业务代码和业务公共代码和第三方依赖
    分离首次加载和访问后加载的代码

webpack内置方法require.ensure懒加载
    []:dependencies
    callback
    errorCallback
    chunkName
        require.include

style-loader添加style标签
    style-loader/url  link一个css文件
    style-loader/userable  通过js方式控制css
style-loader的options:
    insertAt(插入位置)
    insertInto(插入到dom)
    singleton(是否只使用一个style标签)
    transform(转化，浏览器环境下，插入页面前)

css-loader的options:
    alias(别名)
    importLoader(@import)
    Minimize(是否压缩)
    modules(启用css-modules)
css-modules语法:
    :local 本地的样式
    :global 全局的样式
    compose 集成一段样式
    compose ... from path 从某个文件引入样式
    localIdentName:'[path][name]——[local]--[hash:base64:5]'

提取CSS
    extract-loader
    extract-text-webpack-plugin插件

postcss-loader
Autoprefixer CSS兼容 加上前缀
CSS-nano 压缩优化CSS
CSS-next 使用CSS的新语法    

use loader处理顺序是从后往前,如：
    use:[
        {
            loader:'style-loader',
            options: {
            singleton: true,
            transform:'./css.transform.js'
            }
        },
        {
            loader:'css-loader',
            options: {
            // minimize:true,
            modules: true,
            localIdentName:'[path][name]——[local]--[hash:base64:5]'
            }
            // loader:'file-loader'
        },
        {
            loader:'postcss-loader',
            options:{
                ident: 'postcss-loader',
                plugins: [require('autoprefixer')(),require('postcss-cssnext')(),require('postcss-sprites')({spritePath:'dist/assets/imgs/sprites',retina:true 清晰度@2x})]
            }
        }，
        {
            loader:'less-loader'
        }
    ]

Tree Shaking 去掉没有用到的代码 使用场景：常规优化，引入第三方库的某一个功能
(js): 
require("webpack")
new Webpack.optimize.uglifyJsPlugin()
lodash tree shaking 需要使用babel-plugin-lodash

(css):
purify CSS
使用purifycss-webpack
options paths:glob.sync([]) 需要tree shaking的文件

图片处理
    CSS中引入的图片 file-loader
    自动合成的雪碧图 postcss-sprites
    压缩图片 img-loader
    options:{
        pngquant:{
        quality:80
        }
    }
    base64编码 url-loader

字体文件处理file-loader url-loader

引入第三方JS库
    webpack.providePlugin插件：new webpack.providePlugin({$:'jquery'})
    imports-loader:{
            loader:'imports-loader',
            options:{
                $:'jquery'
            }
        }
    window

HTML in webpack
自动生成HTML
    htmlWebpackPlugin
    options
        template 模板
        filename 生成的文件名
        minify:{collapseWhitespace} 压缩
        chunks
        inject 是否通过标签形式插入到HTML中
    HTML中引入图片
    html-loader:options:{
                    attrs:[img:data-src]
                }
场景优化 提前载入webpack加载代码
    inline-manifest-webpack-plugin(有bug)
    html-webpack-inline-chunk-plugin

clean-webpack-plugin 清除之前生成的dist文件
    new CleanWebpackPlugin(['dist'])

webpack搭建开发环境：
    webpack watch mode  ==> 只要在命令行中输入 webpack -watch 或 webpack -w
    webpack-dev-server
        live reloading 浏览器自动刷新
        路径重定向
        HTTPS
        浏览器中显示编译错误
        接口代理
        模块热更新
        devServer:{
            inline 是否在页面上显示打包状态
            contentBase 静态资源
            port 监听的端口
            historyApiFallback 路由重定向 如：
                historyApiFallback:{
                    rewrites:[{from:/^\/(a-zA-Z0-9+\/?)([a-zA-Z0-9]+)/,to:function(context){return '/'+content.match[1]+content.match[2]+'.html'}}]
                }
            https 本地生成https证书
            proxy 代理
                options:{
                    target 代理地址
                    changeOrigin 是否改变源代理
                    headers 增加http请求的头，http协议相关 如Cookie
                    logLevel:'debug' 调试 代理的情况和信息
                    pathRewrite 请求重定向
                }
            hot 模块热更新(webpack.HotModuleReplacementPlugin)(webpack.NameModulesPlugin)
                module.hot
                module.hot.accept 自定义热加载内容
                module.hot.decline
            openpage 指定初始页面
            lazy 懒模式
            overlay 遮罩（编译错误提示）
        }
        Source Map调试 代码映射
            Devtool:
                Development:
                    eval 常规开启
                    eval-source-map
                    cheap-eval-source-map
                    cheap-module-eval-source-map  *
                Production:
                    source-map  *
                    hidden-source-map
                    nosource-source-map
                css要开启loader的sourcemap:
                    css-loader.options.sourcemap
                    less-loader.options.sourcemap
            webpack.SourceMapDevToolPlugin
            webpack.EvalSourceMapDevToolPlugin
    express + webpack-dev-middleware搭建开发环境
        Express or koa
        webpack-dev-middleware
        webpack-hot-middleware
        http-proxy-middleware
        connect-history-api-fallback
        opn 打开浏览器的页面

esLint检查代码格式
eslint
eslint-loader
eslint-plugin-html
eslint-friendly-formatter
配置ESlint
webpack config
.eslintrc.*
package.json中的eslintConfig

开发环境webpack.dev.config.js
模块热更新
sourceMap
接口代理
代码规范检查
生产环境webpack.prod.config.js
提取公用代码
压缩混淆    
文件压缩 base64编码
去除无用的代码

公共配置webpack-merge
同样的入口
同样的代码处理（loader处理）
同样的解析配置
webpack.common.config.js

打包结果分析
offical Analyse tool(官方)
    命令行 webpack --profile --json | Out-file'stats.json' -Encoding OEM
webpack-bundle-analyzer

打包速度优化
一、分开vender和app.js
    DllPlugin
    DllReferencePlugin
二、UglifyJsPlugin 并行
    parallel:true
    cache
三、HappyPack 使loader并行
    HappyPack.ThreadPool 线程
四、babel-loader
    options.cacheDirectory 开启缓存
    include 规定编译的文件
    exclude 规定不需要编译的文件    
减少resolve
Devtool：去除sourcemap
cache-loader
升级node
升级webpack

长缓存优化
    场景一：改变app代码，vender变化
    解决：提取vender
    独立打包vender
    抽出manifest（webpack runtime）
        hash -> chunkhash
        提取 webpack runtime    
    场景二：引入新模块，模块顺序变化，vendor hash变化
    解决：NamedChunksPlugin,NamedModulesPlugin