webpack基础

• webpack需要传入一个配置对象，两种方式（node.js、终端）
• 配置中使用node内置的path模块，并在它前面加上__dirname这个全局变量，以防止不同的操作系统之间的文件路径问题，并且可以是相对路径按照预期工作
• output配置中的path只影响打包输出在硬盘上的文件位置， path: path.resolve(__dirname, './a/dist'),当我们写成这样子，webpack在内存中给我们构建的包也是挂载项目的根目录下面的

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.export

• publicPath(在打包后的代码中有引入资源路径的地方加上publicPath设置的路径，同时也会在内存中帮我们整合好文件路径),webpack-dev-server在启动的时候，将我们把文件打包运行在内存中
  a.当我们没有配置publicPath的时候

 output: {
        // 入口文件打包后的 文件名称
        filename: 'bundle.js',
        // 路由懒加载分模块打包的文件名称
        chunkFilename: '[name].bundle.js',
        // 所有输出文件的目标路径
        path: path.resolve(__dirname, './dist'),
    },

1.运行的项目

image.png

image.png

2.打包后的项目
所有的文件会被打包在dist目录下面
b.当我们配置了publicPath 的时候

 output: {
        // 入口文件打包后的 文件名称
        filename: 'bundle.js',
        // 路由懒加载分模块打包的文件名称
        chunkFilename: '[name].bundle.js',
        // 所有输出文件的目标路径
        path: path.resolve(__dirname, './dist'),
        // 输出解析文件的目录，url相对于html页面
        publicPath: '/dist/',
    },

1.运行的项目

image.png

image.png

2.打包后的项目仍然全部输出在dist文件夹目录下面，但帮我们对引入的资源路径代码做了改变

image.png

• webpack中路径的解析规则

1. 绝对路径： 已经取得文件的绝对路径，因此不需要解析

• import "/home/file" 取得的路径是 当前项目盘符+路径 比如 "C:\home\file"
• import "C:\User\home\file"

2. 相对路径：相对路径引入的资源文件所在的目录被认为是上下文目录，webpack会为其添加上下文路径，以产生模块的觉对路径
   • import "../home/file"

3.模块路径：对于直接声明依赖名的模块（比如vue）,webpack会类似node.js一样进行路径搜索，查找当前文件目录下，父级目录以上目录下的node_modules,看是否有对应名称的模块，这个目录是使用resolve.modules字段进行配置的,你也可以使用alias配置选项来为路径配置一个别名

modules:["node_modules"]
alias:{
    Utils:path.resolve('src/utils')
}
原：import utils from './../utils/index'
现：import utils from 'Utils/index'

一旦根据上述规则解析路径后，解析器将检查路径是否指向文件或目录

• 如果路径指向一个文件
  1. 如果路径具有文件扩展名，则直接将文件打包
  2. 如果路径文件没有扩展名，将使用resolve.extensions中的选项作为文件扩展名来解析，此选项告诉解析器在解析中接受哪些扩展名
• 如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件(descriptionFiles:["package.json"])

1. 如果文件夹包含package.json文件，则按照顺序查找resolve.mainFields:["module","main"]中指定的字段，并且在package.json文件中找到与resolve.mainFields匹配的字段的value值，该值所代表的文件为路径解析查找的文件
2. 如果不存在package.json文件或者package.json文件中的字段value没有返回一个有效的路径，则顺序查找resolve.mainFiles:['index']配置选项中指定的文件名，看看能否在import、require目录下匹配到一个存在的文件名