深入浅出webpack之其他配置

___2
94 阅读5分钟

  • output的plubicPath（该属性是指定index.html文件打包引用的一个基本路径）

    • 它的默认值是一个空字符串，所以我们打包后引入的js文件路径是 bundle。js
    • 在开发中，我们将其设置成 / ,路径是/bundle.js,那么浏览器就会根据所在的域名+路径去请求相应的资源
    • 如果我们希望直接在本地打开打包后的html文件，将其设置为 ./ ,最终引用路径是./bundle.js,根据相对路径去查找资源
    • 如果在部署到服务器时，部署到根目录情况下是直接设置为 / 就可以，如果是部署到子目录，在webpack也可以设置，例如设置为 /code/ ,就是域名+/code/bundle.js,当然通常情况下我们是使用nginx来解决此问题的。

  • devServcer的plubicPath（该属性是指定本地服务所在的文件夹）

    • 它的默认值是 / ,也就是我们直接访问端口即可访问其中的资源http://localhost:8080
    • 如果我们将其设置为 /abc ,那么我们需要通过http://localhost:8080/abc才能访问到对应的资源，并且这个时候，我们其中的bundle.js通过http://localhost:8080/bundle.js也是无法访问的，必须将output.publicPath也设置为/abc,官方也有提到，建议devServer.publicPath和output.publicPath相同

  • devServer的contentBase（devServer中contentBase对于我们直接访问打包后的资源其实并没有太大的作用，它的主要作用是如果我们打包后的资源，又依赖于其他的一些资源，那么就需要指定从哪里来查找这个内容）

    • 比如在index.html中，我们需要依赖一个 abc,js 文件，这个文件我们存放在 public文件中
    • 在indexhtml中，我们应该如何去引入这个文件呢?
      • 比如代码是这样的:<script src="./public/abcjs"></script>
      • 但是这样打包后浏览器是无法通过相对路径去找到这个文件夹的
      • 所以代码是这样的:<script src="/abcjs"></script>
      • 但是我们如何让它去查找到这个文件的存在呢?设置contentBase即可

  • devServer的hotOnly（此配置是设置当代码编译失败时，修改后是否刷新整个页面）

    • 默认情况下会刷新整个页面
    • 如果不希望刷新整个页面，设置 hotOnly:true

  • devServer的host（host是设置主机地址）

    • localhost:本质上是一个域名，通常情况下会被解析成127.0.0.1
    • 如果希望其他地方也可以访问，可以设置为 0.0.0.0,设置之后，我们在同一个网络环境下，其他设备就可以访问到我们电脑上的项目
    • localhost 和 0.0.0.0 的区别
      • localhost:本质上是一个域名，通常情况下会被解析成127.0.0.1
      • 127.0.0.1:回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收
      • 0.0.0.0:监听IPV4上所有的地址，再根据端口找到不同的应用程序

  • devServer的port（设置端口,默认是8080）

  • devServer的open（设置编译成功之后，自动打开浏览器，并访问我们启动的项目）

  • devServer的compress（是否为静态文件开启gzip压缩，默认是false）

    image.png

  • devServer的poxy（用来解决开发环境下的跨域问题）

        module.exports = {
        ...
        devServe:{
            proxy:{
                //表示在请求中/api就会指向target，目标地址
                "/api":{
                    // 代理的目标地址，默认是不支持https的
                    target:"http://192.168.16.134:8088",
                    //表示指向target之后把/api设置为"",这样才能访问到接口内容
                    pathRewrite:{
                        "^/api":""
                    },
                    // 此属性设置为false之后就可以代理https地址了
                    secure:false，
                    // 修改代理请求中的headers中的host属性
                    // 我们真实的请求其实是通过http://192.168.16.134:8088来请求的，
                    // 因为使用了代码，默认情况下它的值是http://192.168.16.134:8080
                    // 如果需要修改，可以将changeOrigin设置为true，一般情况下建议设置为true
                    changeOrigin:true,
                }
            }
        }
    }

  • devServer的historyApFallback（historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误）

    • boolean值:默认是false，如果设置为true，那么在刷新时，返回404错误时，会自动返回index.html 的内容
    • object类型的值，可以配置rewrites属性:可以配置from来匹配路径，配置to决定要跳转到哪一个页面

  • resolve模块解析

    • resolve用于设置模块如何被解析，在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库； resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；webpack 使用 enhanced-resolve这个库来解析文件路径
    • webpack能解析三种文件路径
    • 绝对路径，由于已经获得文件的绝对路径，因此不需要再做进一步解析
    • 相对路径，在这种情况下，使用import 或 require 的资源文件所处的目录，被认为是上下文目录，在import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径
    • 模块路径，在resolve.modules中指定的所有目录检索模块， 默认值是[node_modules]，所以默认会从node_modules中查找文件，
    • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置

  • resolve查找规则

    • 确认是文件 or 文件夹
    • 如果是一个文件且文件具有后缀名，则直接打包文件；否则，将使用resolve.extensions选项作为文件扩展名解析
    • 如果是一个文件夹，会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找；resolve.mainFiles的默认值是【index】；再根据resolve.extensions来解析扩展名

  • resolve的extensions和alias配置

    • 配置resolve中的extensions，可以忽略文件引入后缀

    • 配置resolve中的alias，可以使用简单字符代替文件引入的相对路径”…/"之类

          module.exports = {
         resolve: {
            extensions: ['.js', '.vue', '.json'],	// 引入文件时可忽略后缀
            alias: {
            // 引入文件时使用'@'代替'src'目录
              '@': resolve('src'),	
            }
        },
    }

示例代码

    https://gitee.com/weiLZ598/webpack-study.git
avatar
文章
阅读
粉丝