webpack配置详解

output

filename      文件名称目录
path          输出文件目录
publicPath    所有资源引用公共路径前缀
chunkFilename 非入口chunk的名称
library       整个库向外暴露的名称
libraryTarget 变量添加到哪个上

loader的配置

module:{
rules:[
          {
            test:/\.css$/,            匹配文件
            loader:'css-loader',      单个
            use:[{loader配置}],       多个
            exclued:/node_modules/,   排除文件
            include                   只匹配文件
            enforce:'pre'             优先执行
            enforce:'post'            延后执行
            oneOf:[]                  以下配置只会执行一个(针对文件)
            options:{}                指定配置

resovle

配置解析模块路径别名  import  '$css/index.css'
alias:{
      $css:reslove(__dirname,'src/css')
}

配置省略文件路径的后缀名     import  '$css/index'
extensions:['.css','.json']
    
告诉 webpack 解析模块是去找哪个目录
modules:[reslove(__dirname,'../../node_modules'),'node_modules']
	}

]
}

devServer

devServer:{
  运行代码的目录
  contentBase: path.resolve(__dirname,'dist'),
  监听contentBase目录下的所有文件,一旦文件变化就会reload
  watchContentBase: true,

  watchOptions:{
    //忽略文件
      ignored:/node_modules/
  }

  compress:true,          开启压缩
  port:3000,              端口号
  host:'localhost',       域名
  open:true,              自动打开
  clientLogLevel:'none',  不要显示服务器日志信息
  quiet:true,             除了基本信息,其他的不显示
  overlay:false,          如果出错了,不要全屏提示

  服务器代理---->解决开发环境跨域
  proxy:{
    一旦devServer(5000)服务器受到/api/xxx 的请求,就会把请求转发到另一个服务器(3000)
    '/api':{
      target:'http://localhost:3000',
      
      pathRewrite:{ 发送请求时,请求路径重新:将/api/xxx--->/xxx(去掉api)
        '^api':''
      }

    }
  }

}
}

optimization

optimization:{
  splitChunks:{
    chunks:'all'
    注意:下面配置是默认值,可以不写
    minSize:30*1024,            分割的chunk最小为30kb
    maxSize:0,                  最大没有限制
    minChunks:1,                提取的chunk最小被引用一次
    maxAsyncRequests:5,         按需加载时并行加载的文件的最大数量
    maxInitialRequests:3,       入口js文件最大并行请求数量
    automaticNameDelimiter:'~', 名称连接符
    name:true,                  可以使用命名规则
    cacheGroups:{               分割chunk的组
      node_modules文件会被被打包到 vendors 组的chunk中 --->vendors~0.js
      并且满足上面规则
        vendors:{
          test:/[\\/]node_modules[\\/]/,
          priority:-10,       优先级
        },
        default:{
          minChunks:2,
          priority:-20, 

          如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用,而不是重新打包模块
          reuseExistingChunk:true   
        },

    }
  },
  //解决修改a中的文件,引入a的文件也会改变
        // 将当前模块的记录和其他模块的hash单独打包为一个runtime文件
        runtimeChunk: {
          name: entrypoint => `runtime-${entrypoint.name}`

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