前端webpack的理解

当我们时候脚手架的时候都是通过webpack打包文件 然后基于nodejs开启web服务器
发送请求获取内容，一切的东西都是基于这个来实现代码的编译。
entry入口
output
moudle rules loader
plugin
如上四个是非常重要的

通过入口文件 src文件夹下面的index.js
来运行项目 webpack 支持nodejs的commonjs amd 也兼容部分esmodule
优先会去 module 文件下面去寻找 文件
然后根据路径去寻找
通过引用的模块来判断是否提出为公用模块 减少打包大小
通过文件执行的方法 来 寻找 模块 打包内容
根据文件的关系来确定一个模块里面的js执行文件
js是webpack默认执行es5
es6需要引入babel 这种语言翻译预编译来现实
在执行js入口文件
你会遇见 js css sass scss less img jsx 等等 不同的文件类型
在配置的module rules loader 里面就是起到让webpack认识 这些文件的目的
举例说明
比如常见的vue-loader vue-template-compiler vue-style-loader 这些东西
遇见app.vue文件的加载 就会根据正则 去匹配使用loader 来读取文件内容
读取文件内容的时候会根据loader规则返回内容 进行打包
遇见了template里面的内容 属于模板 就去用正则匹配 里面的各种html 标签的内容
然后把返回标签匹配的内容 根据正则 转换成 虚拟节点 根据插件去编译指令
然后虚拟节点上面加上指令编译的js 来控制 渲染结果
比如遇见图片 有时候你会遇见 jpg png
后端怎么解决图片的，其实就是读取二进制文件 然后根据你的配置来渲染
比如 assets public static 这些是脚手架的文件资源目录
其实不过是nodejs配置了文件位置 根据配置来决定图片的处理
比如file-loader url-loader 如果没有超过limit的就内嵌base64 超过了就打包成文件
最终是保留文件 还是编译hash 都是读取成功之后对文件的处理
js里面有blob的对象 专门用于保留超大的二进制数据
现在说plugin
这是在webpack打包的运行的时候会广播事件进行监听进行的操作
如果是打包css 做什么操作
在打包css首先是预编译less-loader 转换 css-loader 然后变为ast语法树 然后循环判断变为
样式，通过eval这样的方法插件节点link 设置type 导入js css 设置懒加载之类的浏览器加载优化 或者内嵌style渲染
样式 图片 js 都做了 处理
最后就是优化的问题 比如并发的http次数 图片资源的合并 js的分割 节点的渲染加载
将内容挂载在节点上面 进行初始化渲染 提供浏览器响应速度 等等 这是前端浏览器优化重点
最后就是输出 结果 由于是跑在服务器上面的内容
就可以根据发送请求来获取内容 设置文件内容路径
比如设置public为不打包的静态文件目录 每一个资源路径都通过请求来获取
正因为是请求 所以也是http经常出没的地方 根据协议的内容
来合理的安排 比如 hash值的改变 不经常 更换的库 就可以不改变hash内容
利用浏览器缓存304减少请求 避免重复加载资源，用预加载 懒加载资源的代码分割
来实现性能优化

const path=require("path")//这是用来输出path.resovle
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件
const OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin")//压缩css文件
const WorkboxWebpackPlugin=require("workbox-webpack-plugin")//pwa的缓存使用
//cnpm install optimize-css-assets-webpack-plugin --save-dev
//cnpm install workbox-webpack-plugin --save-dev
const htmlplugin=new HtmlWebpackPlugin({//需要在预编译器与插件里面配置
    template:path.join(__dirname,'./src/index.html'),//源头文件
    filename:"index.html"//生成首页的文件名称
})
const css=new minicss({//输出css独立文件
    filename:"./css/[name].css",
    chunkFilename:"[name].css"//或者id
})
module.exports={//webpack基于node构建的
    mode:"production",//mode entry output module:{rule:[]} plugin 还有一些可选的resovle devServe
    entry: {
        index: './src/index.js'
       
    },  
    output: {
        filename: 'js/[name].[contenthash].js',//hash chunkhash content通过热加载输出script文件挂载在目录与index.HTML一样
        path: path.resolve(__dirname, 'dist')//输出采用resovle的绝对路径 而dirname的相对用于服务器上面
        
    }, 
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins:[
        htmlplugin,//把HTML页面输出指定文件
        css,//css插件
        new OptimizeCssAssetsWebpackPlugin(),
        new WorkboxWebpackPlugin.GenerateSW({//pwa缓存的设置
            clientsClaim:true,//删除之前旧的缓存 
            skipWaiting:true//加快加载
        })
     ],
    module: {//所以第三方模块的配置规则
        rules: [
            { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
           // { test:/\.css/,use:['style-loader','css-loader']},
           {test:/\.css$/,use:[{loader:minicss.loader,options:{//css插件在预编译配置
           }},"css-loader"]},
        //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
        //     options: {
        //        modules: {
        //            localIdentName: "[path][name]-[local]-[hash:5]"
        //        }//import css from '路径' console.log(css)会生成模块
        //        //这是react的处理办法 vue就是style里面写scoped
        //        //支持id与class 控制台输出的模块是健对值形式
        //     }//css scss less一样的配置模块化
        //    }]},
            { test:/\.(jpg|PNG|png|jpeg)/,use:[{loader:"url-loader",options:{
                outputPath:"images/",
                limit:50//单位是B 大于这个会打包出来
            }}]}
           // {exclude:/\.(css|js|html|less)$/,loader:"file-loader",options:{name:"[hash:8].[ext]"}}//可以include包含 exclude排除
          //  { test:/\.less/,use:['style-loader','css-loader']}
            
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".json"],//在react配置的时候一定要加 不然不认识 vue就随便
        alias:{//路径别名  
            $router:path.resolve(__dirname,'src/router')
        }
    },
   devtool:"hidden-source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离 
    optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
        splitChunks:{
            chunks:"all"
        }
    }
   
}