webpack(5)入口和出口

一. 路径前提知识:

node中的./表示: 在模块化代码中, 表示当前js文件的目录; 

                          在路径处理中, 表示node运行目录;webpack打包时,是指webpack.config.js所在的目录

            __dirname:当前js文件所在的目录, 是绝对路径;

path.resolve("./","x","y"): 返回组合后的绝对路径 , 并且用的左斜杠, 能兼容不同系统       即: D:\lesson\webpack_1why\x\y

 

二. 输出配置output

       1.path: 要手动配的话, 必须是绝对路径.  一般用node的path函数来配置, 一般不需要配置;用默认的dist就好

       2. filename: 对生成的js文件,而不是.map文件进行配置.可以用相对路径, 一般用占位符等动态规则配置, 占位符就相当于字符串中替换的内容;

 

 hash占位符: 解决浏览器缓存问题,       写成"[name].[hash:5].js" 或者"[name].[chunkhash:5].js"等

       浏览器缓存问题原因: 浏览器会把加载的文件内容缓存起来, 如果后端改了js文件, 没有修改文件名, 则浏览器不知道, 并不会请求新的js文件

       hash和chunkhash的不同: hash是总的资源重新赋给hash值, chunkhash只是对改变了的chunk作出修改.

       id作为占位符不要用, 因为生产环境和开发环境的id不一样.

     

三 入口entry

       配置的是chunk: 是一个对象{chunk名称(默认是main): chunk的入口文件名(相对路径)}

       chunk入口文件可以是一个数组, 表示同时把数组内的文件都作为入口文件.

        多个入口, output必须用动态配置;

      

 

入口和出口配置的最佳实践:

    分三种情况: 一个页面对应一个js, 一个页面对应多个js, 单页面应用

    

      1. 一个页面一个js: 这种方式适合页面之间功能差异巨大, 打包出来的公共代码很少的情况 

              |---src

                  |---pageA  目录

                          |---index.js  pageA启动模块

                          |---...

                  |---pageB目录

                          |---index.js    pageB启动模块

                          |---...

                  |---pageC目录

                          |---main1.js    pageC启动模块1

                          |---main2.js   pageC启动模块2

                          |---...

                  |---common 公共代码目录

                          |---...  工具函数...

 

   webpack配置:

module.exports={
  entry:{
    pageA:"./src/pageA/index.js",
    pageB:"./src/pageB/index.js",
    pageC:["./src/pageC/main1.js","./src/pageC/main2.js"]

  },
  output:{
    filename:"[name].[chunkhash:5].js"
  }
注意:1. common目录中的公共代码, 可能会打包到不同的chunk中, 造成了打包后的代码出现重复, 但这并不影响维护.
  也就是说, 我们编写的代码是不重复的, 是好维护的, 只需要维护common目录中的代码就可以, 不需要管打包后的代码重复不重复
 2.如果打包后的公共代码比较多, 造成的问题是传输问题, 即浏览器获取和缓存的有很多是重复的代码.而不是维护问题

 

   2. 一个页面多个js: 这种方式适合有独立的模块功能, 如统计访问人数. 

              |---src

                  |---pageA  目录

                          |---index.js  pageA启动模块

                          |---...

                  |---pageB目录

                          |---index.js    pageB启动模块

                          |---...

                  |---statics 目录

                          |---index.js    统计人数启动模

                          |---...

                  |---common 公共代码目录

                          |---...  工具函数...

 

module.exports = {
  entry: {
    pageA: "./src/pageA/index.js",
    pageB: "./src/pageB/index.js",
    statics: ["./src/statics/index.js"]// 将统计模块作为单独入口打包, 在每个html中都可以引用

  },
  output: {
    filename: "[name].[chunkhash:5].js"
  }

 

   2. 单页面应用: 

              |---src

                  |---subFunc  目录

                          |---...

                  |---subFunc  目录

                          |---...

                  |---subFunc  目录

                          |---...

                  |---index.js

 

module.exports = {
  entry: "./src/index.js",
  output:{
    filename: "index.[hash:5].js"
  }