前端webpack的理解

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（把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
        splitChunks:{
            chunks:"all"
        }
    }
   
}