webpack进阶未完待续

一、webpack基础

1. 基础配置

entry:"path"/["path"]/{key:path}
output:{
    path:"", //输出路径
    filename:"", //entry输出文件名，[name]为entry.key
    chunkFilename:"", //除entry外的单独输出js文件输出名，[name]为require.ensure第三个参数
    publicPath:"/", //静态文件引用路径，最好为根路径【不然有意想不到的问题，特别在管理静态文件时】，缺省值为相对于html的引用路径。
}
module:{},
plugins:[
    new HtmlWebpackPlugin({
            filename: "", //输出html文件
            template: "", //模板html
            chunks:[chunkName], //将打包出的js文件自动引入到html中，输出js文件chunk名
            minify:true
    }),
    new MiniCssExtractPlugin({
       filename: "[name]/css/[name].css", //css文件输出文件名
       chunkFilename: "[id].css"
    }),
    new OptimizeCssAssetsPlugin(), //压缩css
],
optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    sourceMap: true,
                    comments: false
                }
            })
        ],
        splitChunks: { //js公共模块代码提取
            chunks: 'all', //async、all、initial
            cacheGroups: { // js公共模块单独提出文件匹配规则，cacheGroups会覆盖外层的属性值
                // 公共模块抽离
                commons: { //未有test，所以匹配所有公共模块
                    minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
                    name:"static/commonJs/commons",
                    minSize: 0, // This is example is too small to create commons chunks
                    priority:1 //优先级低
                },
                // 第三方包抽离
                vendors:{
                    test:/node_modules/,
                    minChunks:2,
                    name:'static/commonJs/vendors',
                    priority:10 //优先级高，先抽离公共此块的模块，再抽离下一个级别的模块
                }
            }
        }
    }

1. 输出文件总结

chunk【entry js，非entry js，png、svg等、css等文件】输出路径：output.path+chunkName
chunk文件引用路径：output.publicPath+chunkName

js公共模块提取：optimization.splitChunks【webpack内置】,可通过optimization.splitChunks.cacheGroups匹配不同规则，单独提取符合规则的js文件

css文件提取：mini-css-extract-plugin插件【需要安装第三方包】

二、webpack性能

三、webpack-dev-server读写文件原理

将文件写入内存，写入内存中文件为Buffer格式。。读取通过memory-fs暴露方法读取文件。读取内存文件和往内存中写入文件都在webpack-dev-middleware插件中暴露出方法，一般读取文件、写入文件方法在context.fs对象中，context对象操作内存文件方法，由另一个文件中setFs扩充。