webpack内容详解

Posted 2021-05-17 ~往无前

一、entry

entry:入口起点

1.string  --->指定一个js文件为入口  './src/index.js'
              打包形成一个chunk,输出一个bundle文件.
              此时chunk默认的名称是main
2. array  ['./src/index.js','./src/add.js']
         多入口  所有入口文件最终只会形成一个chunk，输出去只有一个bundle。最终都会默认打包到第一个中去。
          --->只有在HMR功能中让html热更新生效
3.object
    多入口   {add:"./src/add.js",index:"./src/index.js"}
    		 有几个入口文件就形成几个chunk,输出几个bundle文件
              此时chunk的名称是key
		        --->特殊用法
		        {
		            index:['./src/index.js','./src/count.js'],
		            add:['./src/add.js']
		        }

二、output

   output:{
    	//文件名字(指定名称+目录)
    filename:'built.js',
    	//输出文件目录(捡来所有资源输出的公共目录)
    path:resolve(__dirname,'build'),
    	//所有资源引入公共路径前缀
    publicPath:'/',
    chunkFilename:'[name]_chunk.js',	//非入口chunk的名称 
    library:'[name]',		//向外暴露的变量名
    libraryTarget:'common.js', 
    libraryTarget:"window",     //变量名添加到那个上 browser
    libraryTarget:'global',     //变量名添加到那个上 node

},

三、module

        {
            test:/\\.js$/,
           	 	//排除node_modules下的js文件
            exclude:/node_modules/,
            	//只检查src下的js文件
            include:resolve(__dirname,'src'),
            	//优先执行
            enforce:'pre',
            	//延后执行
            enforce:'post',
                //单个loader用loader
            loader:"eslint-loader",
            option:{}
        },
        {
            //以下配置只会生效一个
            oneOf:[]
        }

四、devServer

  devServer:{
   		 //运行代码的目录
    contentBase:resolve(__dirname,'build'),
        //监视contenBase目录下所有文件，一旦文件变化就会reload
    watchContenBase:true,
    watchOptions:{
        //忽略文件
        ignored:/node_modules/
    },
    	//启动gzip压缩
    compress:true,
    	//端口号
    port:5000,
        //域名
    host:'localhost',
    	//自动打开浏览器
    opnen:true,
    	//开启HMR功能
    hot:true,
    	//不要显示启动服务器日志信息
    clientLogLevel:"none",
    	//除了一些基本启动信息以外，其他内容都不要显示
    quiet:'true',
    	//如果出错，不要全屏提示
    overrlay:false,
    	//服务器代理  -->解开发环境跨域问题
    proxy:{
       		 //一旦devServer(5000)服务器收到/api/xxx的请求，就会把请求转发到另一个服务器(3000)
        '/api':{
            target:'http://localhost:3000',
           	 	//发送请求时，请求路径重写：将/api/xxx --->xxx(去掉/api)
            pathRewrite:{
                '^/api':''
            }
        }
    }
}

五、resolve

    //解析模块的规则
	resolve:{
   		 //配置基本模块的路径别名:有点简写路径 缺点路径没有提示
    alias:{
        $css:resolve(__dirname,'src/css')
    },
   		 //配置省略文件路径后缀名
    extensions:['.js','json','.jsx','css'],
    	//告诉webpack 解析模块是去找那个目录
    module:[resolve(__dirname,'../../node_modules'),'node_modules']
}

六、optimization

    optimization:{
        splitChunks:{
            chunks:'all',
            minSize:30*1024,	//分割的chunk最小为30kb
            maxSeize:0,	//最大没有限制
            minChunks:1,	//要提取的chunks最少被引用1次
            maxAsyncRequest:5,	//按需加载时并行加载的文件的最大数量
            maxInitialRequest:3,	//入口js文件最大并行请求数量
            automaticNameDelimiter:'~',	//名称连接符
            name:true,	//可与使用命名规则
            cacheGroups:{	//分割chunk的组
                //node_modules文件会被打包到vendors组的chunk中。-->vendors~xxx.js
                //满足上面的公共规则：如：大小超过30kb，至少被引用一次。
                vendors:{
                    test:/[\\\\/]node_modules[\\\\/]/,
                    //优先级
                    priority:-10,
                },
                default:{
                    	//要提取的chunk最少被引用2次
                    minXChunks:2,
                   	 //优先级
                    priority:-20,
                    	//如果当前那要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
                    reuseExistingChunk:true,
                }
            }
    },

七、minimizer

        minimizer:[
       		 //配置生产环境的压缩方案：js和css
        new TerserWebpackPlugin({
            	//开启缓存
            cache:true,
            	//开启多进程打包
            parallel:true,
           	 //启动source-map
            sourceMap:true,
        })

    ]