面试题 - Webpack-babel各个配置项详解

entry (入口配置)

string ---> '.src/index.js'

单入口
打包形成一个chunk，输出一个bundle文件。
此时chunk的名称默认是main

array ---> ['./src/index.js' , './src/add.js']

多入口
打包形成一个chunk，输出一个bundle文件。
---> 只有在HMR功能中让html热更新生效

object ---> {indx:'./src/index.js' , add:'./src/add.js'}

多入口
有几个入口文件就会形成几个chunk，输出多个bundle文件。
此时chunk的名称是key

output（出口配置）

filename:文件名称(目录 + 名称)
path:输出的目录(将来所有的文件输出的目录)
publicPath:'/' (所有资源引入公共路径的前缀) img/1.png ---> /img/1.png
chunkFilename:'js/[name]_chunk.js' (非入口chunk的名称)
library: '[name]' (整个库向外暴露的变量名)
libraryTarget:'window' (变量名添加的目标)

module (模块，loader的配置)

module:{
  rules:[
    {
      test:/\.css$/,
      // 多个loader的配置
      use:['style-loader','css-loader']
    },
    {
       test:/\.js$/,
      // 单个loader
       loader:'eslint-loader',
      // 排除node_modules下的文件
       exclude:/node_modules/,
      // 只检查src下面的文件
       include:__dirname + '/src',
      // 优先执行 和 延后执行
       enforce:'pre',
       enforce:'post'
      // loader的配置
       options:{}
    },
    {
    // 以下loader只会生效一个
      oneOf:[]
    }
  ]
}

resolve （路径配置）

resolve:{
    // 配置路径别名 : 优点：简写路径 缺点：没有代码提示
    alias : {
      $css : __dirname + '/src/css'
    },
    // 配置省略后缀名的规则,也就是说在引入文件时可以省略后缀名。
    extensions:['.js','.json']，
    // 配置webpack解析模块时所需目录
    modules:[__dirname + '/node_modules','node_modules']
}

devServer (开发服务器)

devServer:{
 // 告诉服务器从哪个目录中提供内容, 一般是打包后的目录。
  contentBase: __dirname + '/build',
  // 告知 dev-server，serve(服务) [`devServer.contentBase`]选项下的文件。开启此选项后，在文件修改之后，会触发一次完整的页面重载。
  watchContentBase: true,
  watchOptions:{
    // 忽略监视node_modules
    ignored:/node_modules/
  },  
  // 启用 gzip 压缩
  compress:true,
  // 端口号：5000
  port : 5000
  // 域名
  host:'localhost',
  // 自动打开浏览器
  open:true,
  // 开启HMR功能
  hot:true,
  //  不要显示启动服务器日志信息
  clientLogLevel:'none',
  // 除了一些基本启动信息外，其他都不要显示
  quiet:true,
  // 如果出现错误不要全屏提示
  overlay:false,
  // proxy  ---> 服务器代理(解决跨域问题)
  proxy:{
    // 一旦devServer(5000)接收到 /api/xxx请求，就会把请求转发到另一个服务器(3000)
    '/api':{
        target:'http://lcoalhost:3000'
     },
    // 发送请求时，请求路径重写: /api/xxx ---> /xxx
    pathRewrite:{
      ‘^api’:'' 
    }
  }
}

optimization (代码分割 code split) ---> mode:'production生产环境'

// code split 代码分割
optimization:{
  // 分割方案 (参考文档)
  splitChunks:{},
  // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
  // 解决：修改a文件导致b文件的contenthash变化
   runtimeChunk:{
    name:entrypoint => `runtime-${entrypoint.name}`    
   },
   minimizer:{
    // 配置生产环境的压缩方案: js 和 css
    new TerserWebpackPlugin({
      // 开启缓存
      cache:true,
      // 是否启用多进程打包
      parallel:true,
      // 启动sourcemap
      sourceMap:true
    })  
  }
}